1. 添加echart的依赖、对应工具类 2. 添加基础产品以及对应菜单

hcong

2024-11-21 2f8efde07d3ecba6065635874126360b3ea82fd1

1. 添加echart的依赖、对应工具类 2. 添加基础产品以及对应菜单

 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=="
        }
      }
    }
  }
}

 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",

 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']

 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: [
      {

 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);

 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')
  },

  /**********************************飞羽环境***********************************************/
  {

 src/utils/echart-util.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,123 @@
// é€’归的获取obj中的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 {
  /** å°†chart图表转化为图片url
   * @param chart： chart图表的实例
   *  */
  chartToImageUrl(chart) {
    const dataURL = chart.getDataURL({
      pixelRatio: 5, // æé«˜å›¾ç‰‡è´¨é‡
      backgroundColor: '#FFFFFF', // è®¾ç½®èƒŒæ™¯é¢œè‰²
      excludeComponents: ['toolbox'], // æŽ’除工具箱组件
      type: 'png' // è¾“出图片类型为PNG
    });
    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;
  }
};

 src/views/fysp/data-product/base-data-product/ProdMonitorTaskInfo.vue

 src/views/fysp/data-product/base-data-product/ProdScenseInfo.vue

 src/views/fysp/data-product/base-data-product/ProdTreatmentDeviceInfo.vue