diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue new file mode 100644 index 0000000..7c357fb --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue new file mode 100644 index 0000000..7c357fb --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue index cbe37c4..f886d9d 100644 --- a/src/views/home/dashboard/fullScreen-components/layout.vue +++ b/src/views/home/dashboard/fullScreen-components/layout.vue @@ -47,10 +47,10 @@ width: 345px; height: 250px; // background-color: aliceblue; - position: absolute; - z-index: 9; - top: 100px; - left: 15px; + // position: absolute; + // z-index: 9; + // top: 100px; + // left: 15px; .header-container { background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover; diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue new file mode 100644 index 0000000..7c357fb --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue index cbe37c4..f886d9d 100644 --- a/src/views/home/dashboard/fullScreen-components/layout.vue +++ b/src/views/home/dashboard/fullScreen-components/layout.vue @@ -47,10 +47,10 @@ width: 345px; height: 250px; // background-color: aliceblue; - position: absolute; - z-index: 9; - top: 100px; - left: 15px; + // position: absolute; + // z-index: 9; + // top: 100px; + // left: 15px; .header-container { background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover; diff --git a/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue b/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue new file mode 100644 index 0000000..15cb3e3 --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue @@ -0,0 +1,63 @@ + + + + + + diff --git a/package.json b/package.json index 61baacc..a6745d6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "circular-json": "^0.5.9", "dayjs": "^1.11.6", "echarts": "^5.4.1", + "echarts-gl": "^2.0.8", "element-plus": "^2.7.8", "file-saver": "^2.0.5", "hotkeys-js": "^3.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e6406c..4355af1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ echarts: specifier: ^5.4.1 version: 5.4.1 + echarts-gl: + specifier: ^2.0.8 + version: 2.0.8(echarts@5.4.1) element-plus: specifier: ^2.7.8 version: 2.7.8(vue@3.2.44) @@ -2361,6 +2364,10 @@ static-extend: 0.1.2 dev: true + /claygl@1.3.0: + resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==} + dev: false + /clean-css@5.3.1: resolution: {integrity: sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==} engines: {node: '>= 10.0'} @@ -3013,6 +3020,16 @@ safer-buffer: 2.1.2 dev: true + /echarts-gl@2.0.8(echarts@5.4.1): + resolution: {integrity: sha512-ayFmjLxdF9pRpnh1Lz5aOgjnLqL3WIGu0t4Bt+oFwXGsViU2XcjCkHZARsZdv05lySow8eMD9JYZGXfLpuqYng==} + peerDependencies: + echarts: ^5.1.2 + dependencies: + claygl: 1.3.0 + echarts: 5.4.1 + zrender: 5.4.1 + dev: false + /echarts@5.4.1: resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==} dependencies: diff --git a/src/assets/images/map/frame1.png b/src/assets/images/map/frame1.png new file mode 100644 index 0000000..ef1b011 --- /dev/null +++ b/src/assets/images/map/frame1.png Binary files differ diff --git a/src/assets/images/map/frame2.png b/src/assets/images/map/frame2.png new file mode 100644 index 0000000..5d95b87 --- /dev/null +++ b/src/assets/images/map/frame2.png Binary files differ diff --git a/src/components.d.ts b/src/components.d.ts index 7a95e43..b536f15 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ ApproverDrawer: typeof import('./components/drawer/approverDrawer.vue')['default'] Auth: typeof import('./components/Auth/index.vue')['default'] AuthAll: typeof import('./components/AuthAll/index.vue')['default'] + BarChart3D: typeof import('./components/Echart/BarChart3D.vue')['default'] BarChartDouble: typeof import('./components/Echart/BarChartDouble.vue')['default'] BarChartHorizontal: typeof import('./components/Echart/BarChartHorizontal.vue')['default'] BarChartVertical: typeof import('./components/Echart/BarChartVertical.vue')['default'] @@ -29,6 +30,7 @@ CertificationRecords: typeof import('./components/Sample/certificationRecords.vue')['default'] ConditionDrawer: typeof import('./components/drawer/conditionDrawer.vue')['default'] ConfigColumnsDialog: typeof import('./components/TableContainer/configColumnsDialog.vue')['default'] + copy: typeof import('./components/Echart/PieChart copy.vue')['default'] CopyerDrawer: typeof import('./components/drawer/copyerDrawer.vue')['default'] Copyright: typeof import('./components/Copyright/index.vue')['default'] DeptSelect: typeof import('./components/DeptSelect/index.vue')['default'] @@ -54,6 +56,7 @@ PageMain: typeof import('./components/PageMain/index.vue')['default'] PcasCascader: typeof import('./components/PcasCascader/index.vue')['default'] PieChart: typeof import('./components/Echart/PieChart.vue')['default'] + PieChart3D: typeof import('./components/Echart/PieChart3D.vue')['default'] PromoterDrawer: typeof import('./components/drawer/promoterDrawer.vue')['default'] QrDialog: typeof import('./components/QrDialog/index.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/components/Echart/BarChart3D.vue b/src/components/Echart/BarChart3D.vue new file mode 100644 index 0000000..8b8d8ea --- /dev/null +++ b/src/components/Echart/BarChart3D.vue @@ -0,0 +1,569 @@ + + + + + diff --git a/src/components/Echart/BarChartHorizontal.vue b/src/components/Echart/BarChartHorizontal.vue index 487d330..6a3c107 100644 --- a/src/components/Echart/BarChartHorizontal.vue +++ b/src/components/Echart/BarChartHorizontal.vue @@ -25,6 +25,21 @@ default: '', }, /** + * 标题样式 + */ + titleTextStyle: { + type: Object, + default: () => { + return { + color: '#333', + fontStyle: 'normal', + fontWeight: 'bolder', + fontSize: 14, + lineHeight: 56, + } + }, + }, + /** * 加载状态 */ loading: { @@ -38,7 +53,7 @@ type: Object, default: () => { return { - top: 10, + top: 20, left: 20, right: 60, bottom: 10, @@ -143,6 +158,10 @@ ] }, }, + color: { + type: String, + default: '#3e29ce', + }, /** * 柱子背景颜色 */ @@ -183,7 +202,7 @@ // 轴线文本宽度 axisLabelWidth: { type: [Number, String], - default: '', + default: '10', }, /** * 是否显示标签 @@ -211,7 +230,7 @@ */ labelFormatter: { type: String, - default: '{c}%', + // default: '{c}%', }, /** * 是否为渐变柱状图 @@ -253,7 +272,7 @@ }, }, valueFormatter: (value: string | number) => { - return value ? value + props.unit : value === 0 ? '0' : '' + return value ? value + props.unit : '' }, }, // 提示框 xAxis: [ @@ -280,7 +299,7 @@ splitLine: { show: props.showAxis, lineStyle: { - color: ['#7a6b74'], + color: ['#bfbfbf'], type: 'dashed', }, }, @@ -312,6 +331,9 @@ option.title = { show: true, text: props.title, + textStyle: props.titleTextStyle, + padding: 0, + top: -16, } } // 图例 @@ -346,11 +368,11 @@ normal: { show: props.showLabel, color: props.labelColor, - position: 'right', + // position: 'right', fontSize: 15, formatter: props.labelFormatter, - align: 'center', - verticalAlign: 'middle', + // align: 'left', + // verticalAlign: 'middle', }, }, showBackground: true, @@ -359,6 +381,7 @@ borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, itemStyle: { + color: props.color, borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer, }, data: item.data, @@ -418,6 +441,8 @@ function initChart() { chart = init(chartRef.value as HTMLElement, tdTheme) chart.setOption({}) + refreshChart() + chart.resize() } // 刷新图表 @@ -425,6 +450,7 @@ if (chart) { const option = buildOption() chart.setOption(option as unknown as ECBasicOption, true) + chart.resize() } } diff --git a/src/components/Echart/LineChart.vue b/src/components/Echart/LineChart.vue index cd9a0ce..faf6777 100644 --- a/src/components/Echart/LineChart.vue +++ b/src/components/Echart/LineChart.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/views/home/alarm/current/components/detailInfoDialog.vue b/src/views/home/alarm/current/components/detailInfoDialog.vue index 7fbf06b..6aa874f 100644 --- a/src/views/home/alarm/current/components/detailInfoDialog.vue +++ b/src/views/home/alarm/current/components/detailInfoDialog.vue @@ -251,13 +251,14 @@ 提醒责任人 报警处置 + 挂起 diff --git a/src/views/home/dashboard/components/controlMap.vue b/src/views/home/dashboard/components/controlMap.vue index 33c7050..e947bda 100644 --- a/src/views/home/dashboard/components/controlMap.vue +++ b/src/views/home/dashboard/components/controlMap.vue @@ -5,12 +5,19 @@ --> + + + + diff --git a/src/views/home/dashboard/fullScreen-components/baseOverView.vue b/src/views/home/dashboard/fullScreen-components/baseOverView.vue index e9ea9ff..9953c4d 100644 --- a/src/views/home/dashboard/fullScreen-components/baseOverView.vue +++ b/src/views/home/dashboard/fullScreen-components/baseOverView.vue @@ -6,10 +6,10 @@ + + + + diff --git a/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue new file mode 100644 index 0000000..7c357fb --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/deviceRunStatus.vue @@ -0,0 +1,80 @@ + + + + + + diff --git a/src/views/home/dashboard/fullScreen-components/layout.vue b/src/views/home/dashboard/fullScreen-components/layout.vue index cbe37c4..f886d9d 100644 --- a/src/views/home/dashboard/fullScreen-components/layout.vue +++ b/src/views/home/dashboard/fullScreen-components/layout.vue @@ -47,10 +47,10 @@ width: 345px; height: 250px; // background-color: aliceblue; - position: absolute; - z-index: 9; - top: 100px; - left: 15px; + // position: absolute; + // z-index: 9; + // top: 100px; + // left: 15px; .header-container { background: url("@/assets/images/dashboard/列表首行.png") no-repeat center / cover; diff --git a/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue b/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue new file mode 100644 index 0000000..15cb3e3 --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/monitorDeviceCount.vue @@ -0,0 +1,63 @@ + + + + + + diff --git a/src/views/home/dashboard/fullScreen-components/pipeNetworkType.vue b/src/views/home/dashboard/fullScreen-components/pipeNetworkType.vue new file mode 100644 index 0000000..f028216 --- /dev/null +++ b/src/views/home/dashboard/fullScreen-components/pipeNetworkType.vue @@ -0,0 +1,51 @@ + + + + + +