界面完成

2024-06-23 14:30:27 +08:00
parent 526af7828d
commit ea0ec60401
5 changed files with 380 additions and 10 deletions
--- a/.env.oms
+++ b/.env.oms
@@ -1,2 +1,4 @@
 VUE_APP_SCOPE=oms
 VUE_APP_API=http://192.168.1.87:19897
+VUE_APP_IS_SIMPLE_SERVER=1
+VUE_APP_PORT=19897
--- a/project/oms/apps/statistics/AppCorpStatistics/AppCorpOverview.vue
+++ b/project/oms/apps/statistics/AppCorpStatistics/AppCorpOverview.vue
@@ -0,0 +1,271 @@
+<template>
+  <section class="AppCorpOverview">
+    <component v-if="currentPage" :is="currentPage" v-bind="$props"/>
+    <ai-detail v-else>
+      <!-- 标题 -->
+      <ai-title slot="title" :title="$options.label" isShowBottomBorder/>
+      <template #content>
+        <ai-tree-menu title="企微统计">
+          <el-tree @node-click="nodeClick" :props="props" :load="loadNode" lazy :expand-on-click-node="false"/>
+        </ai-tree-menu>
+        <div class="fill mar-l8">
+          <div class="sta">
+            <div v-for="(v,k) in sta" :key="k">
+              <div class="title" v-text="v"/>
+              <div class="num" v-text="info[k]"/>
+            </div>
+          </div>
+          <div class="table">
+            <ai-search-bar>
+              <template slot="right">
+                <el-input
+                    v-model="name"
+                    size="small"
+                    placeholder="输入企微名称"
+                    @keyup.enter.native="(page.current = 1), getTableData()"
+                    clearable
+                    prefix-icon="iconfont iconSearch"
+                />
+                <el-button
+                    type="primary"
+                    icon="iconfont iconSearch"
+                    size="small"
+                    @click="(page.current = 1), getTableData()"
+                >查询
+                </el-button>
+                <el-button
+                    icon="el-icon-refresh-right"
+                    size="small"
+                    @click="resetSearch"
+                >重置
+                </el-button
+                >
+              </template>
+            </ai-search-bar>
+            <ai-table :tableData="gropList" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                      @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+              <el-table-column label="操作" slot="options" align="center" width="100">
+                <template v-slot="{row}">
+                  <el-button type="text" @click="$router.push({hash:'#add',query:{id:row.id}})">详情</el-button>
+                </template>
+              </el-table-column>
+            </ai-table>
+          </div>
+        </div>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import coDetail from "./coDetail.vue";
+
+export default {
+  name: 'AppCorpOverview',
+  label: '企微概览',
+  props: {
+    dict: Object,
+    instance: Function,
+    params: Object,
+  },
+  data() {
+    return {
+      props: {
+        label: 'name',
+        children: 'zones',
+        isLeaf: 'leaf'
+      },
+      corpTotal: 0,
+      info: {},
+      gropList: [],
+      page: {current: 1, size: 10, total: 0},
+      areaId: '',
+      name: '',
+      sta: {
+        groupCount: '群总数',
+        userCount: '成员总数',
+        activeCount: '成员活跃总数',
+        residentCount: '居民总人数',
+        groupuserCount: '群成员总数'
+      }
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    currentPage() {
+      return {add: coDetail}[this.$route.hash.substr(1)]
+    },
+    colConfigs() {
+      return [
+        {label: "企微名称", prop: "name", align: 'center', width: 250},
+        {label: "地区", prop: "areaName", align: 'center', width: 150},
+        {label: "地区编码", prop: "areaId", align: 'center', width: 150},
+        {label: "创建时间", prop: "createTime", align: 'center', width: 200},
+        {label: 'CORP_ID', prop: "corpId"},
+        {slot: 'options'}
+      ]
+    }
+  },
+
+  mounted() {
+    this.getInfo()
+    this.getTableData()
+  },
+
+  methods: {
+    loadNode(node, resolve) {
+      if (node.level == 0) {
+        this.instance.post(`/api/appCorpStat/getCorpStatTotal`).then((res) => {
+          if (res.data) {
+            return resolve([{name: `全国  (${res.data})`}]);
+          }
+        })
+        return false
+      }
+      let areaId = node.data.id
+
+      if (node.level == 1) {  //全国
+        areaId = ''
+      }
+      this.instance.post(`/api/appCorpStat/getCorpStatByArea?areaId=${areaId}`).then((res) => {
+        if (res.data) {
+          res.data.map((item) => {
+            item.name = item.name + `(${item.total})`
+            item.leaf = !/0{8}$/.test(item.id)
+          })
+          resolve(res.data)
+        }
+      })
+    },
+
+    nodeClick(list, node) {
+      if (node.data.id) {
+        this.areaId = node.data.id
+        this.page.current = 1
+      } else {
+        this.areaId = ''
+      }
+      this.getInfo()
+      this.getTableData()
+    },
+
+    resetSearch() {
+      this.name = ''
+      this.page.current = 1
+      this.gropList = []
+      this.page.total = 0
+      this.getTableData()
+    },
+
+    getInfo() {
+      this.info = {}
+      this.instance.post(`/api/appCorpStat/getLatestInfo?areaId=${this.areaId}`).then(res => {
+        if (res.code === 0) {
+          this.info = res.data
+        }
+      })
+    },
+
+    getTableData() {
+      this.instance.post(`/api/appCorp/page?areaId=${this.areaId}&current=${this.page.current}&size=${this.page.size}&name=${this.name}`,).then(res => {
+        if (res.code === 0) {
+          if (res.data) {
+            this.gropList = res.data.records
+            this.page.total = res.data.total
+          }
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppCorpOverview {
+  height: 100%;
+
+  .ai-detail {
+    :deep( .ai-detail__content ) {
+      .ai-detail__content--wrapper {
+        display: flex;
+        justify-content: space-between;
+        height: 100%;
+        max-width: 100%;
+        padding: 15px;
+
+        .AiTreeMenu {
+          width: 22%;
+        }
+
+        .flex {
+          width: 78%;
+          margin-left: 10px;
+          padding: 15px;
+          background-color: #fff;
+          overflow-y: scroll;
+
+          .ai-search-ba {
+            margin-top: 10px;
+          }
+
+          .ai-table {
+            margin-top: 0 !important;
+          }
+        }
+      }
+    }
+  }
+
+  :deep( .el-tree ) {
+    .el-tree-node__content {
+      display: inline-flex;
+      min-width: 100%;
+
+      &:hover {
+        background: #e8efff;
+        color: #222222;
+        border-radius: 2px;
+      }
+    }
+
+    .is-current > .el-tree-node__content {
+      background: #2266ff;
+
+      &:hover {
+        background: #2266ff;
+        color: #fff;
+      }
+
+      span {
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .sta {
+    background-color: #eee;
+    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 16px;
+
+
+
+    .title {
+      line-height: 60px;
+      font-size: 18px;
+      text-align: center;
+      color: #666;
+    }
+
+    .num {
+      font-size: 32px;
+      font-weight: 700;
+      text-align: center;
+      padding-bottom: 20px;
+    }
+  }
+}
+</style>
--- a/project/oms/apps/statistics/AppCorpStatistics/coDetail.vue
+++ b/project/oms/apps/statistics/AppCorpStatistics/coDetail.vue
@@ -0,0 +1,96 @@
+<script>
+
+import AiTable from "dui/packages/basic/AiTable.vue";
+
+export default {
+  name: "coDetail",
+  components: {AiTable},
+  label: "系统详情",
+  props: {
+    dict: Object,
+    instance: Function,
+  },
+  data() {
+    return {
+      detail: {},
+      tableData: [],
+      sta: {
+        a: "接入群数量",
+        b: "群消息调用总计",
+        c: "昨日群调用",
+        d: "昨日请求人数"
+      }
+    }
+  },
+  computed: {
+    columns: v => [
+      {label: "群ID", prop: "1", width: 160},
+      {label: "时间", prop: "1", width: 160},
+      {label: "请求文本", prop: "1"},
+    ]
+  },
+  methods: {
+    getDetail() {
+      const {id} = this.$route.query
+      this.instance.post("", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+        }
+      })
+    }
+  },
+  created() {
+    this.getDetail()
+  }
+}
+</script>
+
+<template>
+  <ai-detail class="coDetail">
+    <ai-title slot="title" :title="$options.label" isShowBottomBorder isShowBack @back="$router.push({})"/>
+    <template #content>
+      <div class="grid col-2 gap-20">
+        <div>
+          <ai-card title="大模型应用详情">
+            <el-descriptions :column="1" :colon="false">
+              <el-descriptions-item label="地域名称"></el-descriptions-item>
+              <el-descriptions-item label="地域编号"></el-descriptions-item>
+              <el-descriptions-item label="ab_appid"></el-descriptions-item>
+            </el-descriptions>
+          </ai-card>
+          <ai-card title="大模型应用统计">
+            <div class="grid col-2">
+              <div v-for="(v,k) in sta" :key="k">
+                <div class="title" v-text="v"/>
+                <div class="num" v-text="detail[k]||0"/>
+              </div>
+            </div>
+          </ai-card>
+        </div>
+        <ai-card title="大模型应用日志">
+          <ai-table :table-data="tableData" :col-configs="columns" :isShowPagination="false"/>
+        </ai-card>
+      </div>
+    </template>
+  </ai-detail>
+</template>
+
+<style scoped lang="scss">
+.coDetail {
+  .title {
+    line-height: 60px;
+    font-size: 18px;
+    text-align: center;
+    color: #666;
+  }
+
+  .num {
+    font-size: 32px;
+    font-weight: 700;
+    text-align: center;
+    padding-bottom: 20px;
+  }
+}
+</style>
--- a/ui/lib/styles/common.scss
+++ b/ui/lib/styles/common.scss
@@ -26,7 +26,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
@each $v in (8, 10, 12, 14, 16, 20, 24, 27, 32, 48, 56, 64, 80) {
  //gap
  .gap-#{$v} {
-    gap: #{$v}px
+    gap: #{$v}px !important;
  }
  .font-#{$v} {
    font-size: #{$v}px;
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const proxy = process.env.VUE_APP_API || "http://192.168.1.87:9000"
+const port = process.env.VUE_APP_PORT || 7000
 module.exports = {
  lintOnSave: false,
  productionSourceMap: false,
@@ -13,19 +14,19 @@ module.exports = {
  transpileDependencies: [/dui[\\\/]lib[\\\/]js/],
  chainWebpack: (config) => {
    config.module
-        .rule('js')
-        .include
-        .add(path.resolve(__dirname, 'packages'))
-        .add(path.resolve(__dirname, 'components'))
-        .add(path.resolve(__dirname, 'project'))
-        .add(path.resolve(__dirname, 'examples'))
-        .add(path.resolve(__dirname, 'ui'))
-        .end().use('babel').loader('babel-loader').tap(options => options);
+      .rule('js')
+      .include
+      .add(path.resolve(__dirname, 'packages'))
+      .add(path.resolve(__dirname, 'components'))
+      .add(path.resolve(__dirname, 'project'))
+      .add(path.resolve(__dirname, 'examples'))
+      .add(path.resolve(__dirname, 'ui'))
+      .end().use('babel').loader('babel-loader').tap(options => options);
    config.plugin("limit").use(require("webpack/lib/optimize/LimitChunkCountPlugin"), [{maxChunks: 20}]).tap(options => options)
  },
  devServer: {
    host: '0.0.0.0', //主机地址
-    port: 7000, //端口号
+    port, //端口号
    open: true,
    proxy: {
      //设置代理,可解决跨