diff --git a/src/assets/images/chart/zhigan/component/example1.gif b/src/assets/images/chart/zhigan/component/example1.gif new file mode 100644 index 0000000..cd6d74d Binary files /dev/null and b/src/assets/images/chart/zhigan/component/example1.gif differ diff --git a/src/assets/images/chart/zhigan/component/example1.png b/src/assets/images/chart/zhigan/component/example1.png deleted file mode 100644 index 33e4307..0000000 Binary files a/src/assets/images/chart/zhigan/component/example1.png and /dev/null differ diff --git a/src/assets/images/chart/zhigan/component/example2.gif b/src/assets/images/chart/zhigan/component/example2.gif new file mode 100644 index 0000000..2c88168 Binary files /dev/null and b/src/assets/images/chart/zhigan/component/example2.gif differ diff --git a/src/assets/images/chart/zhigan/component/example2.png b/src/assets/images/chart/zhigan/component/example2.png deleted file mode 100644 index 66e3e0f..0000000 Binary files a/src/assets/images/chart/zhigan/component/example2.png and /dev/null differ diff --git a/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue b/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue index 94393a4..bee9819 100644 --- a/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue +++ b/src/packages/components/Zhigan/Zhigan/ModalButton/svg/button.vue @@ -11,14 +11,21 @@ xmlns:xlink="http://www.w3.org/1999/xlink" > - + - + - + @@ -61,12 +80,16 @@ - + - + - + - + @@ -179,12 +215,16 @@ - + - + - + - + @@ -297,12 +343,12 @@ - + diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts index eac7eca..61751d3 100644 --- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts +++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.ts @@ -10,27 +10,57 @@ const { typeOptions, source } = dataJson; export const option = { type: typeOptions[0].value, typeOptions: typeOptions, - typeStyle: { + dataset: source, + dataStyle: { + backgroud: '#FFFFFF00', typeColor1: '#FFC600', typeTitle1: '已处置', typeColor2: '#08B47A', typeTitle2: '总数', typeFontColor: '#FFFFFF', - typeFontSize: 16, - }, - dataset: source, - dataStyle: { + typeFontSize: 13, + + listTitlePathStrokeColor: '#049D73', + listTitlePathFillColor: '#05A074', + listTitlePathStrokeColor2: '#049D72', + listTitleRectFillColor: '#05A074', + listTypePathStrokeColor: '#06A475', + listTypePathFillColor: '#FFFFFF00', + listTypeRactFillColor: '#06A475', + fontSize1: 13, fontSize2: 10, fontSize3: 13, fontColor1: '#FFFFFF', fontColor2: '#FFFFFF', + fontColor3: '#FFFFFF', + sortOrder: "0", + + typeTop: 5, + listTop: 5, + listLeft: 15, + listTitleWidth: 106, + listTitleHeight: 30, + listProgressHeight: 15, + listTypeWidth: 66, + listTypeHeight: 30, + }, + dataStyleClone:{ + typeColor1: '#FFC600', + typeColor2: '#08B47A', + listTitlePathStrokeColor: '#049D73', + listTitlePathFillColor: '#05A074', + listTitlePathStrokeColor2: '#049D72', + listTitleRectFillColor: '#05A074', + listTypePathStrokeColor: '#06A475', + listTypePathFillColor: '#FFFFFF00', + listTypeRactFillColor: '#06A475', } } export default class Config extends PublicConfigClass implements CreateComponentType { public key = XianSuoShangBaoConfig.key - public attr = { ...chartInitConfig, w: 400, h: 235, zIndex: -1 } + public attr = { ...chartInitConfig, w: 400, h: 225, zIndex: -1 } public chartConfig = cloneDeep(XianSuoShangBaoConfig) public option = cloneDeep(option) } diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue index 52daf8f..94c70db 100644 --- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue +++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/config.vue @@ -1,46 +1,46 @@ diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json index 09831d9..61de9d4 100644 --- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json +++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/data.json @@ -11,47 +11,40 @@ ], "source": [ { - "key": "01", "title":"临沂市", "total": "10", "handled": "6" }, { - "key": "02", "title":"临沂市", "total": "20", "handled": "6" }, { - "key": "03", "title":"临沂市", "total": "4", "handled": "3" }, { - "key": "04", "title":"临沂市", "total": "5", "handled": "1" }, { - "key": "05", "title":"临沂市", "total": "5", "handled": "2" }, { - "key": "06", "title":"临沂市", "total": "6", "handled": "1" }, { - "key": "07", "title":"临沂市", "total": "7", - "handled": "3" + "handled": "7" } ] } diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue index b4117cb..52ff29a 100644 --- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue +++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/index.vue @@ -2,10 +2,10 @@
- - {{ option.typeStyle.typeTitle1 }} - - {{ option.typeStyle.typeTitle2 }} + + {{ option.dataStyle.typeTitle1 }} + + {{ option.dataStyle.typeTitle2 }}
@@ -16,14 +16,19 @@
- +
- +
@@ -35,6 +40,7 @@ import { icon } from '@/plugins'; import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; import { useChartDataFetch } from '@/hooks'; + import dayjs from 'dayjs'; import ListTitle from './svg/listTitle.vue'; import ListType from './svg/listType.vue'; import Progress from './svg/progress.vue'; @@ -51,14 +57,60 @@ const option = reactive({ type: props.chartConfig.option.type, typeOptions: props.chartConfig.option.typeOptions, - typeStyle: props.chartConfig.option.typeStyle, dataset: props.chartConfig.option.dataset, dataStyle: props.chartConfig.option.dataStyle, }); + + watch( + () => option.dataStyle.sortOrder, + () => { + if (option.dataStyle.sortOrder == '0') { + // 分母排序 + option.dataset = option.dataset.sort((a, b) => parseInt(b.total) - parseInt(a.total)); + } else if (option.dataStyle.sortOrder == '1') { + // 分子排序 + option.dataset = option.dataset.sort((a, b) => parseInt(b.handled) - parseInt(a.handled)); + } else if (option.dataStyle.sortOrder == '2') { + // 比例排序 + option.dataset = option.dataset.sort( + (a, b) => + parseInt(b.handled) / parseInt(b.total) - parseInt(a.handled) / parseInt(a.total), + ); + } + option.dataset = option.dataset.map((item, index) => { + const order = String(index + 1); + const newKey = Number(order) >= 10 ? `${order}` : `0${order}`; + return { + ...item, + key: newKey, + }; + }); + }, + { + immediate: true, + deep: true, + }, + ); + + watch( + () => w.value, + () => { + option.dataStyle.listTitleWidth = (w.value * 106.5) / 400; + option.dataStyle.listTitleHeight = (option.dataStyle.listTitleWidth * 20) / 71; + option.dataStyle.listTypeWidth = (w.value * 66) / 400; + option.dataStyle.listTypeHeight = (option.dataStyle.listTypeWidth * 30) / 66; + option.dataStyle.listProgressHeight = (w.value * 15) / 400; + }, + { + immediate: true, + deep: true, + }, + ); diff --git a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue index 7dd21a4..e550f5b 100644 --- a/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue +++ b/src/packages/components/Zhigan/Zhigan/XianSuoShangBao/svg/progress.vue @@ -3,13 +3,17 @@