@qqt-product/system 0.0.1 → 0.0.16

package/src/lib/components/QUsageList/src/QUsageList.vue

@@ -1,82 +1,287 @@
-<template>
-  <div style="height: 100%">
-    <q-list-layout ref="listLayoutRef" v-if="!showEditPage" :pageData="pageData" :apiUrls="apiUrls" />
-  </div>
-</template>
-
-<script lang="ts">
-//JS
-import { defineComponent, reactive, toRefs } from 'vue'
-//hook
-import { useConfigData } from './useConfigData'
-
-export default defineComponent({
-  name: 'QUsageList',
-  props: {
-    userInfo: {
-      type: Object,
-      defalut: () => {
-        return {}
-      },
-    },
-  },
-  setup(props) {
-    //data
-    const pageData = reactive({
-      statusConfig: {
-        show: false,
-      },
-      optColumn: {
-        attrs: {},
-        extend: {},
-        optColumnList: [
-          // { authorityCode: 'role#Role:edit', type: 'edit', title: srmI18n(`${getLangAccount()}#i18n_title_edit`, '编辑'), clickFn: this.edit },
-          // { authorityCode: 'role#Role:copy', type: 'copy', title: srmI18n(`${getLangAccount()}#i18n_title_copy`, '复制'), clickFn: this.handleCopy },
-          // { authorityCode: 'role#Permissio:saveRolePermission', type: 'view', title: srmI18n(`${getLangAccount()}#i18n_title_impower`, '授权'), clickFn: this.handlePerssion, allow: this.allowDelete },
-          // { authorityCode: 'role#Role:delete', type: 'delete', title: srmI18n(`${getLangAccount()}#i18n_title_delete`, '删除'), clickFn: this.handleDelete, allow: this.allowDelete },
-          // { authorityCode: 'role#Role:userSet', type: 'usersList', title: srmI18n(`${getLangAccount()}#i18n_btn_jDER_36c46210`, '用户配置'), clickFn: this.handleUsersList },
-        ],
-      },
-      buttonConfig: {
-        attrs: {},
-        extend: {},
-        buttons: [
-          // {authorityCode: 'role#Role:add', label: srmI18n(`${getLangAccount()}#i18n_title_add`, '新增'),  clickFn: this.add, type: 'primary'},
-          //             {label: srmI18n(`${getLangAccount()}#i18n_title_listCustom`, '列自定义'), icon: 'setting', clickFn: this.settingColumns},
-          //             {label: srmI18n(`${getLangAccount()}#i18n_title_helpText`, '帮助说明'), icon: 'file-text', folded: true, isDocument: true, clickFn: this.showHelpText},
-          //             {label: srmI18n(`${getLangAccount()}#i18n_title_attachment`, '说明附件'), icon: 'file-pdf', folded: true, isDocument: true, clickFn: this.showHelpPDF}
-        ],
-      },
-      queryConfig: {
-        attrs: {},
-        extend: {},
-        form: [
-          {
-            type: 'input',
-            label: '角色名称',
-            fieldName: 'roleName',
-            placeholder: '请输入角色名称',
-          },
-        ],
-        formState: {},
-      },
-      pagerConfig: {},
-    })
-    //data-hook
-    const { showEditPage, apiUrls } = useConfigData()
-    const { userInfo } = toRefs(props)
-    console.log('userInfos', userInfo)
-    //methods
-    // function allowDelete() {
-    //   console.log('userInfo.value?.userInfo?.elsAccount', userInfo.value?.userInfo?.elsAccount)
-    //   if (userInfo.value?.userInfo?.elsAccount != '100000') {
-    //     return true
-    //   } else {
-    //     return false
-    //   }
-    // }
-    return { showEditPage, apiUrls, pageData }
-  },
-})
-</script>
-<style scoped></style>
+<template>
+  <div style="height: 100%; padding: 6px">
+    <a-row :gutter="5">
+      <a-col :span="12">
+        <a-card :title="srmI18n(`i18n_title_moduleUsage`, '模块使用情况')">
+          <vxe-grid v-bind="moduleOptains"> </vxe-grid>
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card :title="srmI18n(`i18n_title_useredUsage`, '用户使用情况')">
+          <vxe-grid v-bind="useOptains"> </vxe-grid>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="5" style="margin-top: 6px">
+      <a-col :span="24">
+        <a-card :title="`${srmI18n(`i18n_title_moduleUsage`, '模块使用情况')}(${getYearMonth(month)})`">
+          <template #extra> <a-date-picker :disabled-date="disabledDate" v-model:value="month" picker="month" @change="datePickerChange" /></template>
+          <div class="chart" ref="chartRef"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="5" style="margin-top: 6px">
+      <a-col :span="24">
+        <a-card :title="`${srmI18n(`i18n_title_userUsageSummary`, '用户使用情况(汇总)')}`">
+          <!-- <template #extra> <a-date-picker :disabled-date="disabledDate" v-model:value="month" picker="month" @change="datePickerChange" /></template> -->
+          <div class="chart" ref="useChartRef"></div>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts">
+//JS
+import { defineComponent, inject, onMounted, ref, nextTick } from 'vue'
+import qqtApi from '@qqt-product/api'
+import { init, graphic } from 'echarts'
+import type { ECharts } from 'echarts'
+
+import qqtUtils from '@qqt-product/utils'
+//hook
+import { useConfigData } from './useConfigData'
+//ts
+
+//组件
+
+export default defineComponent({
+  name: 'QUsageList',
+
+  props: {
+    userInfo: {
+      type: Object,
+      defalut: () => {
+        return {}
+      },
+    },
+  },
+  setup() {
+    //inject
+    const srmI18n = inject('Q_SRM_I18N', (i18nKey: string, defaultValue: string, account?: string | number): string => {
+      if (i18nKey) {
+        if (account) {
+          return account + defaultValue
+        }
+        return defaultValue
+      }
+      return defaultValue
+    })
+    //data-hook
+    const { apiUrls, moduleOptains, useOptains, moduleChartoption, useChartoption, useChartoptionInstan, moduleChartoptionInstan } = useConfigData(srmI18n)
+    //data
+    const qHttp: qqtApi.Request = qqtApi.useHttp()
+    const chartRef = ref()
+    const useChartRef = ref()
+    let chart: ECharts
+    let useChart: ECharts
+    // const dateNow = new Date().getTime()
+    const month = ref()
+
+    //methods
+    function getModuleList(params = {}) {
+      qHttp
+        .get({
+          url: apiUrls.moduleOptList,
+          params,
+        })
+        .then((res) => {
+          if (res.success) {
+            moduleOptains.data = res.result.records
+            moduleChartoptionInstan.xAxis.data = res.result.records.length > 0 ? res.result.records.map((n) => n.busModule) : []
+            moduleChartoptionInstan.series[0].data = res.result.records.length > 0 ? res.result.records.map((n) => n.totalCount) : []
+
+            moduleChartoption.value = {
+              ...moduleChartoptionInstan,
+            }
+            nextTick(() => {
+              chart.setOption(moduleChartoption.value)
+            })
+            return res.records
+          }
+        })
+    }
+
+    function getUseList() {
+      qHttp
+        .get({
+          url: apiUrls.useOptList,
+        })
+        .then((res) => {
+          if (res.success) {
+            useOptains.data = res.result
+
+            const year = new Date().getFullYear()
+            const tableData = res.result.map((n) => ({
+              ...n,
+              _account: `${n.subAccount}_${n.userName}`,
+            }))
+            let xAxisData: string[] = []
+            for (let i = 0; i < 12; i++) {
+              let mo = ''
+              let n = i + 1
+              if (n < 10) {
+                mo = '0' + n
+              }
+              xAxisData.push(`${year}-${mo}`)
+            }
+
+            let groupBySubAccount = qqtUtils.groupBy(tableData, '_account')
+            let legendData = Object.keys(groupBySubAccount)
+            let areaStyles = [
+              {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(128, 255, 165)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(1, 191, 236)',
+                  },
+                ]),
+              },
+              {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 221, 255)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(77, 119, 255)',
+                  },
+                ]),
+              },
+              {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(55, 162, 255)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(116, 21, 219)',
+                  },
+                ]),
+              },
+              {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 0, 135)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(135, 0, 157)',
+                  },
+                ]),
+              },
+              {
+                opacity: 0.8,
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 191, 0)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(224, 62, 76)',
+                  },
+                ]),
+              },
+            ]
+            let series = Object.keys(groupBySubAccount).map((prop, i) => {
+              let name = prop
+              let areaStyle
+              if (i < 5) {
+                areaStyle = areaStyles[i]
+              } else {
+                const index = Math.floor(Math.random() * 5)
+                areaStyle = areaStyles[index]
+              }
+              let accountData = groupBySubAccount[prop]
+              let data = xAxisData.map((sub) => {
+                let { totalCount = 0 } = accountData.find((n) => n.logMonth === sub) || {}
+                return totalCount
+              })
+              return {
+                name: name,
+                type: 'line',
+                stack: srmI18n(`i18n_title_total`, '总量'),
+                smooth: true,
+                lineStyle: {
+                  width: 0,
+                },
+                showSymbol: false,
+                areaStyle: areaStyle,
+                emphasis: {
+                  focus: 'series',
+                },
+                data: data,
+              }
+            })
+            useChartoptionInstan.legend.data = legendData.length > 0 ? legendData : []
+            useChartoptionInstan.xAxis.data = xAxisData.length > 0 ? xAxisData : []
+            useChartoptionInstan.series = series.length > 0 ? series : []
+
+            useChartoption.value = {
+              ...useChartoptionInstan,
+            }
+
+            nextTick(() => {
+              useChart.setOption(useChartoption.value)
+            })
+
+            return res.records
+          }
+        })
+    }
+
+    function getYearMonth(date) {
+      if (date) {
+        const curDate = new Date(date)
+        let curDateY = curDate.getFullYear()
+        let curDateM = curDate.getMonth() + 1
+        return curDateY + '-' + (curDateM <= 9 ? '0' + curDateM : curDateM)
+      } else {
+        return ''
+      }
+    }
+
+    function disabledDate(current) {
+      const datacurren = new Date(current)
+      const datenow = new Date()
+      return datacurren.getMonth() + 1 > datenow.getMonth() + 1
+    }
+
+    function datePickerChange() {
+      getModuleList({
+        logMonth: getYearMonth(month.value),
+        pageSize: 200,
+      })
+    }
+
+    //生命周期
+    onMounted(async () => {
+      chart = init(chartRef.value)
+      useChart = init(useChartRef.value)
+      await getModuleList()
+      await getUseList()
+    })
+
+    return { useChartRef, apiUrls, srmI18n, moduleOptains, useOptains, moduleChartoption, chartRef, month, getYearMonth, disabledDate, datePickerChange }
+  },
+})
+</script>
+<style scoped>
+.chart {
+  width: 100%;
+  height: 400px;
+}
+</style>

package/src/lib/components/QUsageList/src/useConfigData.ts

@@ -1,20 +1,154 @@
-import { shallowRef, ref } from 'vue'
-// import type { MapObjectNoneType } from './types'
-// import { VxeTableInstance } from 'vxe-table'
-// import type  {}
-export function useConfigData() {
+import { shallowRef, ref, reactive } from 'vue'
+//ts
+import type { MapObjectNoneType } from '../../../utils/global.types'
+
+export function useConfigData(srmI18n) {
   //响应
 
-  const apiUrls = shallowRef({
-    list: '/account/role/list',
-    columnsCode: 'elsRole',
-    delete: '/account/role/delete',
-    copy: '/account/role/copy',
-    userRoleList: '/account/elsSubAccount/userRoleList',
+  const apiUrls = reactive({
+    moduleOptList: '/log/elsLogStatistics/list',
+    useOptList: '/log/findUserLoginList',
   })
   const uploadShow = shallowRef<boolean>(false)
-  const showEditPage = shallowRef<boolean>(false)
   const currentEditRow = ref({})
   const listLayoutRef = ref()
-  return { apiUrls, showEditPage, currentEditRow, listLayoutRef, uploadShow }
+  const moduleOptains = reactive<MapObjectNoneType>({
+    border: true,
+    height: 500,
+    align: null,
+    columnConfig: {
+      resizable: true,
+    },
+    columns: [
+      { type: 'seq', width: 50, title: srmI18n(`i18n_title_seq`, '序号') },
+      { title: srmI18n(`i18n_title_moduleName`, '模块名称'), field: 'busModule' },
+      { title: srmI18n(`i18n_field_logMonth`, '月份'), field: 'logMonth' },
+      { title: srmI18n(`i18n_title_operationsNum`, '操作次数'), field: 'totalCount' },
+    ],
+    data: [],
+  })
+
+  const useOptains = reactive<MapObjectNoneType>({
+    border: true,
+    height: 500,
+    align: null,
+    columnConfig: {
+      resizable: true,
+    },
+    columns: [
+      { type: 'seq', width: 50, title: srmI18n(`i18n_title_seq`, '序号') },
+      { title: srmI18n(`i18n_field_Jey_16832e1`, '子账号'), field: 'subAccount' },
+      { title: srmI18n(`i18n_title_userName`, '用户名'), field: 'userName' },
+      { title: srmI18n(`i18n_field_logMonth`, '月份'), field: 'logMonth' },
+      { title: srmI18n(`i18n_title_loginCount`, '登录次数'), field: 'totalCount' },
+    ],
+
+    data: [],
+  })
+
+  const moduleChartoption = ref({})
+
+  const useChartoption = ref({})
+
+  const useChartoptionInstan = {
+    title: {
+      text: srmI18n(`i18n_title_loginCount`, '登录次数'),
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      width: '60%',
+      type: 'scroll',
+      data: [] as string[],
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none',
+        },
+        // dataView: {readOnly: false},
+        magicType: { type: ['line', 'bar', 'stack'] },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: [] as string[],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [] as MapObjectNoneType[],
+  }
+
+  const moduleChartoptionInstan = {
+    title: {
+      text: srmI18n(`i18n_title_moduleUsage`, '模块使用情况'),
+      subtext: '汇总',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: [srmI18n(`i18n_title_usage`, '使用情况')],
+    },
+    toolbox: {
+      show: true,
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none',
+        },
+        // dataView: {readOnly: false},
+        magicType: { type: ['line', 'bar', 'stack'] },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: [],
+      axisLabel: {
+        // 坐标轴刻度标签
+        rotate: '45',
+      },
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        name: srmI18n(`i18n_title_usage`, '使用情况'),
+        type: 'bar',
+        data: [],
+        center: ['50%', '50%'],
+        markPoint: {
+          data: [
+            { type: 'max', name: srmI18n(`i18n_title_maximum`, '最大值') },
+            { type: 'min', name: srmI18n(`i18n_title_minimum`, '最小值') },
+          ],
+        },
+        markLine: {
+          data: [{ type: 'average', name: srmI18n(`i18n_title_averagemum`, '平均值') }],
+        },
+      },
+    ],
+  }
+
+  return { moduleChartoptionInstan, useChartoptionInstan, apiUrls, useOptains, moduleChartoption, currentEditRow, moduleOptains, listLayoutRef, uploadShow, useChartoption }
 }