mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
Merge branch 'master-fetch' of gitee.com:dromara/go-view into lyw
Signed-off-by: 宝莉 <1084050926@qq.com>
This commit is contained in:
宝莉
Gitee
commit
648740d578
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "go-view",
|
||||
"version": "2.2.7",
|
||||
"version": "2.2.8",
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
|
||||
BIN
src/assets/images/chart/decorates/flow-circle.png
Normal file
BIN
src/assets/images/chart/decorates/flow-circle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/images/chart/decorates/flow-zhexian.png
Normal file
BIN
src/assets/images/chart/decorates/flow-zhexian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/images/chart/informations/inputs_input.png
Normal file
BIN
src/assets/images/chart/informations/inputs_input.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
@ -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
|
||||
|
||||
@ -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' }
|
||||
]
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
|
||||
@ -33,7 +33,6 @@ export const lineSeriesItem = {
|
||||
},
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
itemStyle: {
|
||||
color: '#FFE47A',
|
||||
borderWidth: 1
|
||||
},
|
||||
lineStyle: {
|
||||
|
||||
@ -62,6 +62,12 @@
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.smooth" size="small" />
|
||||
<n-text>曲线</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点" v-if="item.type == 'line'">
|
||||
<SettingItem name="大小">
|
||||
@ -91,10 +97,10 @@
|
||||
<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' }
|
||||
{ label: '顶部', value: 'top' },
|
||||
{ label: '左侧', value: 'left' },
|
||||
{ label: '右侧', value: 'right' },
|
||||
{ label: '底部', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
autoresize
|
||||
></v-chart>
|
||||
</template>
|
||||
@ -12,6 +14,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, PropType, nextTick } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { isObject, cloneDeep } from 'lodash'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
:init-options="initOptions"
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -80,5 +80,7 @@ watch(
|
||||
option.value = props.chartConfig.option
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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]
|
||||
}
|
||||
|
||||
@ -22,13 +22,21 @@
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="内容" :alone="true">
|
||||
<setting-item-box name="显示要素" :alone="true">
|
||||
<n-checkbox-group v-model:value="optionData.mapOptions.features">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="文字标注" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="位置">
|
||||
<setting-item name="经度">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
||||
@ -76,11 +84,94 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="图层" :expanded="true">
|
||||
<setting-item-box name="卫星图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="路网图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="实时交通">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
@ -134,10 +225,6 @@ const themeOptions = [
|
||||
{
|
||||
value: ThemeEnum.WINE,
|
||||
label: '酱籽'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.WEIXIN,
|
||||
label: '卫星'
|
||||
}
|
||||
]
|
||||
|
||||
@ -170,19 +257,19 @@ const viewModeOptions = [
|
||||
const featuresOptions = [
|
||||
{
|
||||
value: FeaturesEnum.BG,
|
||||
label: '显示地图背景'
|
||||
label: '区域面'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.POINT,
|
||||
label: '显示标识'
|
||||
label: '标注'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.ROAD,
|
||||
label: '显示道路'
|
||||
label: '道路'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.BUILDING,
|
||||
label: '显示建筑'
|
||||
label: '建筑物'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -28,9 +28,13 @@ let {
|
||||
amapStyleKeyCustom,
|
||||
features,
|
||||
viewMode,
|
||||
showLabel,
|
||||
pitch,
|
||||
skyColor,
|
||||
marker
|
||||
marker,
|
||||
satelliteTileLayer,
|
||||
roadNetTileLayer,
|
||||
trafficTileLayer
|
||||
} = toRefs(props.chartConfig.option.mapOptions)
|
||||
|
||||
let mapIns: any = null
|
||||
@ -42,7 +46,7 @@ const initMap = (newData: any) => {
|
||||
// 初始化
|
||||
AMapLoader.load({
|
||||
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
|
||||
version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||
})
|
||||
.then(AMap => {
|
||||
@ -56,17 +60,40 @@ const initMap = (newData: any) => {
|
||||
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||
skyColor: skyColor.value,
|
||||
viewMode: viewMode.value, // 地图模式
|
||||
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||
willReadFrequently: true
|
||||
})
|
||||
dataHandle(props.chartConfig.option.dataset)
|
||||
let satellite = new AMap.TileLayer.Satellite()
|
||||
let roadNet = new AMap.TileLayer.RoadNet()
|
||||
if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
|
||||
mapIns.add([satellite, roadNet])
|
||||
} else {
|
||||
mapIns.remove([satellite, roadNet])
|
||||
mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
|
||||
|
||||
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||
zIndex: satelliteTileLayer.value.zIndex,
|
||||
opacity: satelliteTileLayer.value.opacity,
|
||||
zooms: satelliteTileLayer.value.zooms
|
||||
})
|
||||
let roadNetLayer = new AMap.TileLayer.RoadNet({
|
||||
zIndex: roadNetTileLayer.value.zIndex,
|
||||
opacity: roadNetTileLayer.value.opacity,
|
||||
zooms: roadNetTileLayer.value.zooms
|
||||
})
|
||||
let trafficLayer = new AMap.TileLayer.Traffic({
|
||||
zIndex: trafficTileLayer.value.zIndex,
|
||||
opacity: trafficTileLayer.value.opacity,
|
||||
zooms: trafficTileLayer.value.zooms
|
||||
})
|
||||
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
|
||||
if (satelliteTileLayer.value.show) {
|
||||
mapIns.add([satelliteLayer])
|
||||
}
|
||||
if (roadNetTileLayer.value.show) {
|
||||
mapIns.add([roadNetLayer])
|
||||
}
|
||||
if (trafficTileLayer.value.show) {
|
||||
mapIns.add([trafficLayer])
|
||||
}
|
||||
|
||||
mapIns.setMapStyle(
|
||||
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
|
||||
)
|
||||
})
|
||||
.catch(e => {})
|
||||
}
|
||||
|
||||
@ -325,7 +325,19 @@ const backLevel = () => {
|
||||
|
||||
// 切换地图
|
||||
const checkOrMap = async (newData: string) => {
|
||||
if (newData === 'china') {
|
||||
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
|
||||
// 显示南海
|
||||
hainanLandsHandle(true)
|
||||
vEchartsSetOption()
|
||||
} else {
|
||||
// 隐藏南海
|
||||
hainanLandsHandle(false)
|
||||
vEchartsSetOption()
|
||||
}
|
||||
} else {
|
||||
await getGeojson(newData)
|
||||
}
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
|
||||
@ -56,7 +56,11 @@ const option = {
|
||||
show: false,
|
||||
position: 'center',
|
||||
formatter: '{b}',
|
||||
fontSize:12
|
||||
fontWeight: 'normal',
|
||||
fontSize: 14,
|
||||
color: '#454E54',
|
||||
textBorderColor: '#ffffff',
|
||||
textBorderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
|
||||
@ -26,6 +26,20 @@
|
||||
<n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="图形">
|
||||
<setting-item name="内圈范围">
|
||||
<n-input v-model:value="optionData.series[0].radius[0]" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="外圈范围">
|
||||
<n-input v-model:value="optionData.series[0].radius[1]" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="X轴中心">
|
||||
<n-input v-model:value="optionData.series[0].center[0]" size="small"></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="Y轴中心">
|
||||
<n-input v-model:value="optionData.series[0].center[1]" size="small"></n-input>
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="标签">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
@ -46,28 +60,67 @@
|
||||
<n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
|
||||
</setting-item>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="字体">
|
||||
<setting-item name="大小">
|
||||
<n-input-number v-model:value="optionData.series[0].label.fontSize" size="small" :min="0"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色" v-if="optionData.series[0].label.color">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.series[0].label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<SettingItem name="文字加粗" v-if="optionData.series[0].label.fontWeight">
|
||||
<n-select
|
||||
v-model:value="optionData.series[0].label.fontWeight"
|
||||
size="small"
|
||||
:options="labelConfig.fontWeight"
|
||||
/>
|
||||
</SettingItem>
|
||||
<setting-item name="文字边框大小" v-if="optionData.series[0].label.textBorderWidth">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].label.textBorderWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="文字边框色" v-if="optionData.series[0].label.textBorderColor">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.series[0].label.textBorderColor"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="圆角">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<setting-item name="圆角大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].itemStyle.borderRadius"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
<n-text>圆角大小</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<setting-item name="线条宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].itemStyle.borderWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
<n-text>线条宽度</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="鼠标聚焦">
|
||||
<setting-item name="文字大小">
|
||||
<n-input-number
|
||||
v-model:value="optionData.series[0].emphasis.label.fontSize"
|
||||
size="small"
|
||||
:min="0"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<SettingItem name="文字加粗" v-if="optionData.series[0].emphasis.label.fontWeight">
|
||||
<n-select
|
||||
v-model:value="optionData.series[0].emphasis.label.fontWeight"
|
||||
size="small"
|
||||
:options="labelConfig.fontWeight"
|
||||
/>
|
||||
</SettingItem>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
|
||||
@ -47,10 +47,9 @@ export const option = {
|
||||
tooltip: {
|
||||
showDelay: 0,
|
||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||
// console.log(params)
|
||||
return params.value.length > 1
|
||||
? `${params.seriesName}：<br />${params.value[0]} ${params.value[1]}`
|
||||
: `${params.seriesName}：<br />${params.name} ${params.value}`
|
||||
: `${params.name} ${params.value}`
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { FlowChartLineConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
endWidth: 15,
|
||||
lineWidth: 2, //线条粗细
|
||||
lineNum: 2, //向下数量
|
||||
lineNumUp: 2, //向上数量
|
||||
backgroundCol: '#303a4c', //线条背景
|
||||
animateCol: '#3788ea' //流动动画背景
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = FlowChartLineConfig.key
|
||||
public chartConfig = cloneDeep(FlowChartLineConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<CollapseItem name="线条" :expanded="true">
|
||||
<SettingItemBox name="折线数量">
|
||||
<SettingItem name="向下增加">
|
||||
<n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="向上增加">
|
||||
<n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<SettingItemBox name="折线样式">
|
||||
<SettingItem name="折线粗细">
|
||||
<n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="背景条颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="流动颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
|
||||
</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>
|
||||
@ -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'
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
:points="getStartPoint(-1, '')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
v-for="(item, index) in lineNum"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'down')"
|
||||
:stroke="backgroundCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
v-for="(item, index) in lineNum"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'down')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
v-for="(item, index) in lineNumUp"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'up')"
|
||||
:stroke="backgroundCol"
|
||||
fill="none"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="lineWidth"
|
||||
class="g-dashed-line"
|
||||
v-for="(item, index) in lineNumUp"
|
||||
:key="index"
|
||||
:points="getStartPoint(index + 1, 'up')"
|
||||
:stroke="animateCol"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, computed } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
|
||||
const getStartPoint = (num: number, direction: string) => {
|
||||
const lineLength = w.value / 2
|
||||
const lineColLength =
|
||||
h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
|
||||
if (num === -1 && direction === '') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
|
||||
} else if (num !== -1 && direction === 'down') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
|
||||
lineLength * 2
|
||||
},${h.value / 2 + num * lineColLength}`
|
||||
} else if (num !== -1 && direction === 'up') {
|
||||
return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
|
||||
lineLength * 2
|
||||
},${h.value / 2 - num * lineColLength}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.g-dashed-line {
|
||||
stroke-dasharray: 20 130;
|
||||
stroke-dashoffset: 0;
|
||||
animation: move 3s infinite linear;
|
||||
}
|
||||
@keyframes move {
|
||||
0% {
|
||||
stroke-dashoffset: 20;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: -130;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
3
src/packages/components/Decorates/FlowChart/index.ts
Normal file
3
src/packages/components/Decorates/FlowChart/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { FlowChartLineConfig } from './FlowChartLine/index'
|
||||
|
||||
export default [FlowChartLineConfig]
|
||||
@ -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)
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<CollapseItem name="线条" :expanded="true">
|
||||
<SettingItemBox name="具体">
|
||||
<SettingItem name="外圆环半径">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.outCircle"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="内部圆形半径">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.inCircle"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="外圆环粗细">
|
||||
<n-input-number
|
||||
size="small"
|
||||
v-model:value="optionData.outCircleWidth"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
|
||||
<SettingItem name="外圆环颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outCircleColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="内部圆形颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inCircleColor"></n-color-picker>
|
||||
</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>
|
||||
14
src/packages/components/Decorates/Mores/CirclePoint/index.ts
Normal file
14
src/packages/components/Decorates/Mores/CirclePoint/index.ts
Normal file
@ -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'
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<svg :width="w" :height="h">
|
||||
<defs>
|
||||
<filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
|
||||
</filter>
|
||||
</defs>
|
||||
<circle :cx="w / 2 " :cy="h / 2" :r="inCircle" :fill="inCircleColor" filter="url(#blurFilter)"/>
|
||||
<!-- 外部圆环 -->
|
||||
<circle :cx="w / 2 " :cy="h / 2" :r="outCircle" fill="none" :stroke="outCircleColor" :stroke-width="outCircleWidth"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { outCircle,inCircle,outCircleColor,inCircleColor,outCircleWidth} = toRefs(props.chartConfig.option)
|
||||
|
||||
</script>
|
||||
|
||||
@ -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,
|
||||
|
||||
2
src/packages/components/Decorates/index.d.ts
vendored
2
src/packages/components/Decorates/index.d.ts
vendored
@ -1,6 +1,7 @@
|
||||
export enum ChatCategoryEnum {
|
||||
BORDER = 'Borders',
|
||||
DECORATE = 'Decorates',
|
||||
FlowChart = 'FlowChart',
|
||||
THREE = 'Three',
|
||||
MORE = 'Mores',
|
||||
TOPBARS = 'TopBars',
|
||||
@ -10,6 +11,7 @@ export enum ChatCategoryEnum {
|
||||
export enum ChatCategoryEnumName {
|
||||
BORDER = '边框',
|
||||
DECORATE = '装饰',
|
||||
FlowChart = '流程',
|
||||
THREE = '三维',
|
||||
MORE = '更多',
|
||||
TOPBARS = '顶栏',
|
||||
|
||||
@ -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'
|
||||
}
|
||||
@ -36,7 +36,7 @@ let option = shallowReactive({ ...configOption })
|
||||
// 预览更新
|
||||
const vVideoRef = ref(null)
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
option = newData
|
||||
option.dataset = newData
|
||||
})
|
||||
|
||||
// 编辑更新
|
||||
|
||||
@ -41,10 +41,12 @@ export const setData = (option: any, data: EchartsDataType) => {
|
||||
* @param instance
|
||||
* @param data
|
||||
*/
|
||||
export const setOption = <T extends typeof VChart | undefined, D>(instance: T, data: D) => {
|
||||
export const setOption = <T extends typeof VChart | undefined, D>(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
|
||||
})
|
||||
}
|
||||
|
||||
@ -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<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(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,10 +805,23 @@ 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
|
||||
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
|
||||
@ -803,8 +831,9 @@ export const useChartEditStore = defineStore({
|
||||
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()
|
||||
}
|
||||
},
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -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)"
|
||||
>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
|
||||
<n-modal
|
||||
class="go-chart-data-pond-control"
|
||||
v-model:show="modelShowRef"
|
||||
:mask-closable="false"
|
||||
:close-on-esc="true"
|
||||
:onEsc="onEsc"
|
||||
>
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
@ -29,7 +35,10 @@
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
|
||||
<div>
|
||||
<n-button class="go-mr-3" @click="closeHandle">取消</n-button>
|
||||
<n-button type="primary" @click="closeAndSendHandle">保存 & 发送请求</n-button>
|
||||
</div>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
@ -82,9 +91,12 @@ const pondData = computed(() => {
|
||||
return data[0]
|
||||
})
|
||||
|
||||
watch(() => props.modelShow, (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()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -10,7 +10,11 @@
|
||||
>
|
||||
<!-- 源地址 -->
|
||||
<setting-item name="前置 URL">
|
||||
<n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例：http://127.0.0.1/"></n-input>
|
||||
<n-input
|
||||
v-model:value.trim="requestOriginUrl"
|
||||
:disabled="editDisabled"
|
||||
placeholder="例：http://127.0.0.1/"
|
||||
></n-input>
|
||||
</setting-item>
|
||||
<setting-item name="更新间隔，为 0 只会初始化">
|
||||
<n-input-group>
|
||||
|
||||
@ -21,7 +21,10 @@
|
||||
{{ requestContentTypeObj[requestContentType] }}
|
||||
</n-tag>
|
||||
</div>
|
||||
<div>
|
||||
<n-button class="go-mr-3" @click="closeHandle">取消</n-button>
|
||||
<n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
|
||||
</div>
|
||||
</n-space>
|
||||
</template>
|
||||
</n-card>
|
||||
@ -75,6 +78,10 @@ const closeAndSendHandle = () => {
|
||||
emit('sendHandle')
|
||||
dataSyncUpdate()
|
||||
}
|
||||
|
||||
const onEsc = () => {
|
||||
closeHandle()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
|
||||
<n-modal
|
||||
class="go-chart-data-request"
|
||||
v-model:show="modelShowRef"
|
||||
:mask-closable="false"
|
||||
:closeOnEsc="true"
|
||||
:onEsc="onEsc"
|
||||
>
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
@ -62,10 +68,12 @@ const pondName = ref()
|
||||
const inputInstRef = ref()
|
||||
const modelShowRef = ref(false)
|
||||
|
||||
watch(() => props.modelShow, (newValue) => {
|
||||
watch(
|
||||
() => props.modelShow,
|
||||
newValue => {
|
||||
modelShowRef.value = newValue
|
||||
})
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
const closeHandle = () => {
|
||||
emit('update:modelShow', false)
|
||||
@ -88,6 +96,10 @@ const closeAndSendHandle = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onEsc = () => {
|
||||
closeHandle()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -151,6 +151,7 @@ $max-width: 670px;
|
||||
min-width: $min-width;
|
||||
min-width: $max-width;
|
||||
padding: 0 10px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -55,7 +55,6 @@ const rangeModelStyle = computed(() => {
|
||||
position: relative;
|
||||
transform-origin: left top;
|
||||
background-size: cover;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@include fetch-border-color('hover-border-color');
|
||||
@include fetch-bg-color('background-color2');
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
>
|
||||
</sketch-rule>
|
||||
<div ref="$app" class="edit-screens" @scroll="handleScroll">
|
||||
<div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
|
||||
<div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
|
||||
<div
|
||||
ref="refSketchRuleBox"
|
||||
class="canvas"
|
||||
@ -62,8 +62,13 @@ const scale = computed(() => {
|
||||
return chartEditStore.getEditCanvas.scale
|
||||
})
|
||||
|
||||
// 滚动条拖动的高度
|
||||
// 滚动条拖动的宽度
|
||||
const containerWidth = computed(() => {
|
||||
return `${window.innerWidth * 2}px`
|
||||
})
|
||||
|
||||
// 滚动条拖动的高度
|
||||
const containerHeight = computed(() => {
|
||||
return `${height.value * 2}px`
|
||||
})
|
||||
|
||||
@ -173,12 +178,12 @@ const canvasBox = () => {
|
||||
}
|
||||
|
||||
// 重绘标尺
|
||||
const reDraw = () => {
|
||||
const reDraw = throttle(() => {
|
||||
sketchRuleReDraw.value = false
|
||||
setTimeout(() => {
|
||||
sketchRuleReDraw.value = true
|
||||
}, 10)
|
||||
}
|
||||
},20)
|
||||
|
||||
// 滚动居中
|
||||
const canvasPosCenter = () => {
|
||||
@ -203,14 +208,12 @@ watch(
|
||||
(newValue, oldValue) => {
|
||||
if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
|
||||
chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
|
||||
}
|
||||
handleScroll()
|
||||
setTimeout(() => {
|
||||
canvasPosCenter()
|
||||
reDraw()
|
||||
}, 400)
|
||||
} else {
|
||||
throttle(reDraw, 20)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
@ -337,7 +340,7 @@ window.onKeySpacePressHold = (isHold: boolean) => {
|
||||
|
||||
.edit-screen-container {
|
||||
position: absolute;
|
||||
height: v-bind('containerWidth');
|
||||
height: v-bind('containerHeight');
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@ -93,21 +93,20 @@ watch(
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.select-border {
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0.5;
|
||||
border-width: 2px;
|
||||
opacity: 1;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: v-bind('themeColor');
|
||||
}
|
||||
.select-background {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
opacity: 0.2;
|
||||
opacity: 0.08;
|
||||
background-color: v-bind('themeColor');
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,7 +145,7 @@ const enableOuter = (flag: boolean) => {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.shape-modal-select {
|
||||
|
||||
@ -231,6 +231,8 @@ $asideBottom: 70px;
|
||||
border: 1px solid;
|
||||
@include fetch-border-color('hover-border-color-shallow');
|
||||
&.aside {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
height: auto;
|
||||
right: 20px;
|
||||
|
||||
@ -310,7 +310,11 @@ export const useMouseHandle = () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
chartEditStore.moveComponentList(prevComponentInstance)
|
||||
|
||||
const moveComponentInstance = prevComponentInstance.filter(
|
||||
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||
)
|
||||
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||
}
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
|
||||
@ -212,7 +212,6 @@ onMounted(() => {
|
||||
@include background-image('background-point');
|
||||
|
||||
@include goId('chart-edit-content') {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@extend .go-transition;
|
||||
@include fetch-theme('box-shadow');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-space class="header-left-btn" :size="25">
|
||||
<n-space class="header-left-btn" :wrap="false" :size="25">
|
||||
<n-button size="small" quaternary @click="goHomeHandle()">
|
||||
<template #icon>
|
||||
<n-icon :depth="3">
|
||||
@ -7,7 +7,7 @@
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-space>
|
||||
<n-space :wrap="false">
|
||||
<!-- 模块展示按钮 -->
|
||||
<n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
|
||||
<template #trigger>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-space class="go-mt-0">
|
||||
<n-space class="go-mt-0" :wrap="false">
|
||||
<n-button v-for="item in comBtnList" :key="item.key" :type="item.type()" ghost @click="item.event">
|
||||
<template #icon>
|
||||
<component :is="item.icon"></component>
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
type="text"
|
||||
maxlength="16"
|
||||
:placeholder="$t('global.form_account')"
|
||||
@keydown.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
@ -78,6 +79,7 @@
|
||||
maxlength="16"
|
||||
show-password-on="click"
|
||||
:placeholder="$t('global.form_password')"
|
||||
@keydown.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-icon size="18">
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="chart-item"
|
||||
:id="item.id"
|
||||
v-for="(item, index) in chartEditStore.componentList"
|
||||
:class="animationsClass(item.styles.animations)"
|
||||
:key="item.id"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!-- mask-closable 暂时是失效的，不知道为啥 -->
|
||||
<n-modal
|
||||
class="go-modal-box"
|
||||
v-model:show="showRef"
|
||||
:mask-closable="true"
|
||||
@afterLeave="closeHandle"
|
||||
>
|
||||
<n-card hoverable size="small">
|
||||
|
||||
@ -1,19 +1,41 @@
|
||||
<template>
|
||||
<div class="go-project-template-market">
|
||||
<div class="content-box">
|
||||
<n-space vertical>
|
||||
<n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()"></n-image>
|
||||
<n-h3>暂时还没有东西呢</n-h3>
|
||||
<img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_5pimyysnnh8000.png" style="width: 100%" />
|
||||
<img src="https://goviewpro.goviewlink.com/charts-img-db/charts-img-db_id_izetnl0654w00.png" style="height: 400px" />
|
||||
<n-button text tag="a" href="https://ai.goviewlink.com/?channel=mayun" target="_blank" type="primary">
|
||||
前往 GoViewPro 查看 👆
|
||||
</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { requireErrorImg } from '@/utils'
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go("project-template-market") {
|
||||
margin-top: 100px;
|
||||
@include go('project-template-market') {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 62px);
|
||||
padding-top: 3vh;
|
||||
.content-box {
|
||||
width: 700px;
|
||||
margin: 0 auto 0;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(29, 83, 163, 0.3) 99.09%);
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.04);
|
||||
@extend .go-flex-center;
|
||||
img {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark() {
|
||||
@include go('project-template-market') {
|
||||
background-color: #18181c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
1
types/shims-vue.d.ts
vendored
1
types/shims-vue.d.ts
vendored
@ -6,3 +6,4 @@ declare module '*.vue' {
|
||||
|
||||
declare module 'lodash/*'
|
||||
declare module 'dom-helpers'
|
||||
declare module 'vue3-sketch-ruler';
|
||||
@ -92,7 +92,7 @@ export default ({ mode } : { mode:any }) => defineConfig({
|
||||
// minify: 'terser', // 如果需要用terser混淆，可打开这两行
|
||||
// terserOptions: terserOptions,
|
||||
rollupOptions: rollupOptions,
|
||||
brotliSize: brotliSize,
|
||||
reportCompressedSize: brotliSize,
|
||||
chunkSizeWarningLimit: chunkSizeWarningLimit
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user