From 701447950880f09520e802ef72bb81e2356749d8 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期二, 26 十一月 2024 14:11:58 +0800 Subject: [PATCH] Merge branch 'hc-dataproduct-1121' into lsf-dataproduct-1024 --- package-lock.json | 63 ++++++++++++ src/utils/echart-util.js | 123 ++++++++++++++++++++++++ src/main.js | 4 src/views/fysp/data-product/base-data-product/ProdScenseInfo.vue | 0 src/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue | 0 package.json | 1 src/components.d.ts | 22 ---- src/constants/menu.js | 21 ++++ src/router/index.js | 18 +++ src/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue | 0 10 files changed, 230 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cacd5a..32e37e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "docxtemplater": "^3.50.0", "docxtemplater-image-module": "^3.1.0", "docxtemplater-image-module-free": "^1.1.1", + "echarts": "^5.5.1", "element-plus": "^2.8.3", "exceljs": "^4.4.0", "file-saver": "^2.0.5", @@ -4036,6 +4037,22 @@ "jsbn": "~0.1.0", "safer-buffer": "^2.1.0" } + }, + "node_modules/echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.6.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" }, "node_modules/electron-to-chromium": { "version": "1.4.284", @@ -8431,6 +8448,21 @@ "engines": { "node": ">= 10" } + }, + "node_modules/zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "license": "BSD-3-Clause", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" } }, "dependencies": { @@ -11046,6 +11078,22 @@ "requires": { "jsbn": "~0.1.0", "safer-buffer": "^2.1.0" + } + }, + "echarts": { + "version": "5.5.1", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz", + "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==", + "requires": { + "tslib": "2.3.0", + "zrender": "5.6.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } } }, "electron-to-chromium": { @@ -13849,6 +13897,21 @@ } } } + }, + "zrender": { + "version": "5.6.0", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz", + "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==", + "requires": { + "tslib": "2.3.0" + }, + "dependencies": { + "tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + } + } } } } diff --git a/package.json b/package.json index 3b8fb9b..4b341e9 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "docxtemplater": "^3.50.0", "docxtemplater-image-module": "^3.1.0", "docxtemplater-image-module-free": "^1.1.1", + "echarts": "^5.5.1", "element-plus": "^2.8.3", "exceljs": "^4.4.0", "file-saver": "^2.0.5", diff --git a/src/components.d.ts b/src/components.d.ts index d9c2fb8..0ac0d9e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -13,32 +13,22 @@ CompGenericWrapper: typeof import('./components/CompGenericWrapper.vue')['default'] CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default'] Content: typeof import('./components/core/Content.vue')['default'] - ElAffix: typeof import('element-plus/es')['ElAffix'] ElAside: typeof import('element-plus/es')['ElAside'] ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElBadge: typeof import('element-plus/es')['ElBadge'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] - ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] - ElCalendar: typeof import('element-plus/es')['ElCalendar'] ElCard: typeof import('element-plus/es')['ElCard'] - ElCascader: typeof import('element-plus/es')['ElCascader'] - ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCol: typeof import('element-plus/es')['ElCol'] ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElContainer: typeof import('element-plus/es')['ElContainer'] - ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDescriptions: typeof import('element-plus/es')['ElDescriptions'] ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem'] ElDialog: typeof import('element-plus/es')['ElDialog'] - ElDivider: typeof import('element-plus/es')['ElDivider'] ElDrawer: typeof import('element-plus/es')['ElDrawer'] - ElDropdown: typeof import('element-plus/es')['ElDropdown'] - ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] - ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] @@ -47,37 +37,25 @@ ElImage: typeof import('element-plus/es')['ElImage'] ElImageViewer: typeof import('element-plus/es')['ElImageViewer'] ElInput: typeof import('element-plus/es')['ElInput'] - ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] - ElLink: typeof import('element-plus/es')['ElLink'] ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElOption: typeof import('element-plus/es')['ElOption'] - ElPageHeader: typeof import('element-plus/es')['ElPageHeader'] - ElPagination: typeof import('element-plus/es')['ElPagination'] - ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopover: typeof import('element-plus/es')['ElPopover'] - ElRadio: typeof import('element-plus/es')['ElRadio'] - ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] - ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] - ElSegmented: typeof import('element-plus/es')['ElSegmented'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSpace: typeof import('element-plus/es')['ElSpace'] ElStep: typeof import('element-plus/es')['ElStep'] ElSteps: typeof import('element-plus/es')['ElSteps'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] - ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTag: typeof import('element-plus/es')['ElTag'] ElText: typeof import('element-plus/es')['ElText'] - ElTooltip: typeof import('element-plus/es')['ElTooltip'] - ElTransfer: typeof import('element-plus/es')['ElTransfer'] ElTree: typeof import('element-plus/es')['ElTree'] ElUpload: typeof import('element-plus/es')['ElUpload'] Footer: typeof import('./components/core/Footer.vue')['default'] diff --git a/src/constants/menu.js b/src/constants/menu.js index 39cafb0..72f2ea3 100644 --- a/src/constants/menu.js +++ b/src/constants/menu.js @@ -45,6 +45,27 @@ }, { icon: 'DataAnalysis', + name: '鍩虹鏁版嵁浜у搧', + children: [ + { + path: '/fysp/data-product/ProdScenseInfo', + icon: 'Document', + name: '鍦烘櫙娓呭崟', + }, + { + path: '/fysp/data-product/ProdMonitorTaskInfo', + icon: 'Document', + name: '鐩戠娓呭崟', + }, + { + path: '/fysp/data-product/ProdTreatmentDeviceInfo', + icon: 'Document', + name: '闃叉不璁惧娓呭崟', + }, + ] + }, + { + icon: 'DataAnalysis', name: '涓棿鏁版嵁浜у搧', children: [ { diff --git a/src/main.js b/src/main.js index 511d8bd..6f7f655 100644 --- a/src/main.js +++ b/src/main.js @@ -19,12 +19,16 @@ import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; +// echarts +import * as echarts from 'echarts' + dayjs.extend(isSameOrAfter); dayjs.extend(isSameOrBefore); const app = createApp(App); app.config.globalProperties.$fm = timeUtil; +app.config.globalProperties.$echarts = echarts for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); diff --git a/src/router/index.js b/src/router/index.js index 6a36171..fea22a1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -161,6 +161,24 @@ path: '/fysp/support', component: () => import('@/views/fysp/support/JingAnSupport.vue'), }, + { + // 鍩虹浜у搧-鍦烘櫙娓呭崟 + name: 'ProdScenseInfo', + path: '/fysp/data-product/ProdScenseInfo', + component: () => import('@/views/fysp/data-product/base-data-product/ProdScenseInfo.vue') + }, + { + // 鍩虹浜у搧-鐩戠娓呭崟 + name: 'ProdMonitorTaskInfo', + path: '/fysp/data-product/ProdMonitorTaskInfo', + component: () => import('@/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue') + }, + { + // 鍩虹浜у搧-闃叉不璁惧娓呭崟 + name: 'ProdTreatmentDeviceInfo', + path: '/fysp/data-product/ProdTreatmentDeviceInfo', + component: () => import('@/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue') + }, /**********************************椋炵窘鐜***********************************************/ { diff --git a/src/utils/echart-util.js b/src/utils/echart-util.js new file mode 100644 index 0000000..0934d69 --- /dev/null +++ b/src/utils/echart-util.js @@ -0,0 +1,123 @@ +// 閫掑綊鐨勮幏鍙杘bj涓殑prop灞炴�� 瑙e喅鏈夋椂闇�瑕佸彇val.obj.prop鐨勬儏鍐� +function getPropValueLoop(obj, prop) { + if (typeof prop !== 'string') { + return obj; + } + const props = prop.split('.'); + let result = obj; + props.forEach((item) => { + result = result[item]; + }); + return result; +} +function getCount(array, element) { + let count = 0; + array.forEach((e) => { + if (e == element) { + count++; + } + }); + return count; +} +export default { + /** 灏哻hart鍥捐〃杞寲涓哄浘鐗噓rl + * @param chart锛� chart鍥捐〃鐨勫疄渚� + * */ + chartToImageUrl(chart) { + const dataURL = chart.getDataURL({ + pixelRatio: 5, // 鎻愰珮鍥剧墖璐ㄩ噺 + backgroundColor: '#FFFFFF', // 璁剧疆鑳屾櫙棰滆壊 + excludeComponents: ['toolbox'], // 鎺掗櫎宸ュ叿绠辩粍浠� + type: 'png' // 杈撳嚭鍥剧墖绫诲瀷涓篜NG + }); + return dataURL; + }, + // 灞曠ず data 鏁扮粍涓璞$殑 prop 灞炴�х殑楗煎浘, title 鏄ゼ鍥剧殑鏍囬 + getPieChartByDataAndProp(data, prop, label) { + let chartData = []; + function hasThisName(name) { + for (let index = 0; index < chartData.length; index++) { + const element = chartData[index]; + if (element.name === name) { + return true; + } + } + return false; + } + + data.map((item) => { + const name = getPropValueLoop(item, prop); + if (hasThisName(name)) { + chartData.map((item) => { + if (item.name === name) { + item.value++; + } + }); + } else { + chartData.push({ + name: name, + value: 1 + }); + } + }); + + return { + title: { + text: label, + left: 'center' + }, + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + left: 'left' + }, + series: [ + { + type: 'pie', + radius: '50%', + data: chartData, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + }; + }, + // 灞曠ず data 鏁扮粍涓璞$殑 prop 灞炴�х殑鐩存柟鍥�, title 鏄洿鏂瑰浘鐨勬爣棰� + getBarChartByDataAndProp(data, prop, title) { + let series = data.map((item) => getPropValueLoop(item, prop)); + const option = { + title: { + text: title //璁剧疆鏍囬 + }, + xAxis: { + type: 'category', + data: Array.from(new Set(series)), + axisLabel: { + rotate: 45, // 鏃嬭浆鏍囩锛岄伩鍏嶉噸鍙� + // 鎴栬�� + interval: 0 // 鏄剧ず鎵�鏈夋爣绛撅紝鍙兘瀵艰嚧閲嶅彔锛屾牴鎹渶姹傝皟鏁� + } + }, + yAxis: { + type: 'value' + }, + series: [ + { + data: Array.from(new Set(series)).map((item) => + getCount(series, item) + ), + type: 'bar', + smooth: true + } + ] + }; + return option; + } +}; diff --git a/src/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue b/src/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue diff --git a/src/views/fysp/data-product/base-data-product/ProdScenseInfo.vue b/src/views/fysp/data-product/base-data-product/ProdScenseInfo.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/fysp/data-product/base-data-product/ProdScenseInfo.vue diff --git a/src/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue b/src/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue -- Gitblit v1.9.3