From 2f8efde07d3ecba6065635874126360b3ea82fd1 Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期四, 21 十一月 2024 13:43:43 +0800
Subject: [PATCH] 1. 添加echart的依赖、对应工具类 2. 添加基础产品以及对应菜单
---
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 7d97466..e76e42c 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,32 +12,22 @@
BasePanelLayout: typeof import('./components/core/BasePanelLayout.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']
@@ -45,37 +35,25 @@
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
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 c5a1b56..87bb58f 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灞炴�� 瑙ｅ喅鏈夋椂闇�瑕佸彇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