+import { onMounted, PropType, reactive, watch, ref } from 'vue'
+import { COLOR_PANEL, DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
+import { useI18n } from '@/hooks/web/useI18n'
+import CustomColorStyleSelect from '@/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue'
+import { cloneDeep, defaultsDeep } from 'lodash-es'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import {
+ CHART_MIX_DEFAULT_BASIC_STYLE,
+ MixChartBasicStyle
+} from '@/views/chart/components/js/panel/charts/others/chart-mix-common'
+
+const dvMainStore = dvMainStoreWithOut()
+const { batchOptStatus } = storeToRefs(dvMainStore)
+const { t } = useI18n()
+const props = defineProps({
+ chart: {
+ type: Object as PropType
,
+ required: true
+ },
+ themes: {
+ type: String as PropType,
+ default: 'dark'
+ },
+ propertyInner: {
+ type: Array
+ }
+})
+
+const showProperty = prop => props.propertyInner?.includes(prop)
+const predefineColors = COLOR_PANEL
+const state = reactive({
+ basicStyleForm: JSON.parse(JSON.stringify(CHART_MIX_DEFAULT_BASIC_STYLE)) as MixChartBasicStyle,
+ miscForm: JSON.parse(JSON.stringify(DEFAULT_MISC)) as ChartMiscAttr,
+ customColor: null,
+ colorIndex: 0,
+ fieldColumnWidth: {
+ fieldId: '',
+ width: 0
+ }
+})
+watch(
+ [
+ () => props.chart.customAttr.basicStyle,
+ () => props.chart.customAttr.misc,
+ () => props.chart.customAttr.tableHeader,
+ () => props.chart.xAxis,
+ () => props.chart.yAxis
+ ],
+ () => {
+ init()
+ },
+ { deep: true }
+)
+const emit = defineEmits(['onBasicStyleChange', 'onMiscChange'])
+const changeBasicStyle = (prop?: string, requestData = false) => {
+ emit('onBasicStyleChange', { data: state.basicStyleForm, requestData }, prop)
+}
+const onAlphaChange = v => {
+ const _v = parseInt(v)
+ if (_v >= 0 && _v <= 100) {
+ state.basicStyleForm.alpha = _v
+ } else if (_v < 0) {
+ state.basicStyleForm.alpha = 0
+ } else if (_v > 100) {
+ state.basicStyleForm.alpha = 100
+ } else {
+ const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+ const oldForm = defaultsDeep(
+ basicStyle,
+ cloneDeep(CHART_MIX_DEFAULT_BASIC_STYLE)
+ ) as ChartBasicStyle
+ state.basicStyleForm.alpha = oldForm.alpha
+ }
+ changeBasicStyle('alpha')
+}
+const onSubAlphaChange = v => {
+ const _v = parseInt(v)
+ if (_v >= 0 && _v <= 100) {
+ state.basicStyleForm.subAlpha = _v
+ } else if (_v < 0) {
+ state.basicStyleForm.subAlpha = 0
+ } else if (_v > 100) {
+ state.basicStyleForm.subAlpha = 100
+ } else {
+ const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+ const oldForm = defaultsDeep(
+ basicStyle,
+ cloneDeep(CHART_MIX_DEFAULT_BASIC_STYLE)
+ ) as MixChartBasicStyle
+ state.basicStyleForm.subAlpha = oldForm.subAlpha
+ }
+ changeBasicStyle('alpha')
+}
+
+const init = () => {
+ const basicStyle = cloneDeep(props.chart.customAttr.basicStyle)
+ const miscStyle = cloneDeep(props.chart.customAttr.misc)
+ configCompat(basicStyle)
+ state.basicStyleForm = defaultsDeep(
+ basicStyle,
+ cloneDeep(CHART_MIX_DEFAULT_BASIC_STYLE)
+ ) as MixChartBasicStyle
+ state.miscForm = defaultsDeep(miscStyle, cloneDeep(DEFAULT_MISC)) as ChartMiscAttr
+ if (!state.customColor) {
+ state.customColor = state.basicStyleForm.colors[0]
+ state.colorIndex = 0
+ }
+}
+const configCompat = (basicStyle: ChartBasicStyle) => {
+ // 悬浮改为图例和缩放按钮
+ if (basicStyle.suspension === false && basicStyle.showZoom === undefined) {
+ basicStyle.showZoom = false
+ }
+}
+const symbolOptions = [
+ { name: t('chart.line_symbol_circle'), value: 'circle' },
+ { name: t('chart.line_symbol_rect'), value: 'square' },
+ { name: t('chart.line_symbol_triangle'), value: 'triangle' },
+ { name: t('chart.line_symbol_diamond'), value: 'diamond' }
+]
+
+const activeName = ref<'left' | 'right'>('left')
+
+onMounted(() => {
+ init()
+})
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('chart.gradient') }}{{ $t('chart.color') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ %
+
+
+
+
+
+
+
+
+ {{ t('chart.rightAngle') }}
+ {{ t('chart.roundAngle') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ %
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('chart.line_smooth') }}
+
+
+
+
+