Merge remote-tracking branch 'origin/master'

src/api/system/employeeStats.js

@@ -0,0 +1,115 @@
+import request from '@/utils/request'
+
+// 查询员工完成统计列表
+export function listEmployeeStats(query) {
+  return request({
+    url: '/stats/seller/pageList',
+    method: 'post',
+    data: query
+  })
+}
+
+export function listInlineList(query) {
+  return request({
+    url: '/stats/inline/pageList',
+    method: 'post',
+    data: query
+  })
+}
+
+export function exportInlineList(param){
+  return request({
+    url: '/stats/inline/export',
+    method: 'post',
+    data: param
+  })
+}
+export function exportSellerData(param){
+  return request({
+    url: '/stats/seller/export',
+    method: 'post',
+    data: param
+  })
+}
+
+export function listPeriodList(query) {
+  return request({
+    url: '/stats/period/pageList',
+    method: 'post',
+    data: query
+  })
+}
+
+export function exportPeriodData(query){
+  return request({
+    url: '/stats/period/export',
+    method: 'post',
+    data: query
+  })
+}
+
+export function exportTodayData(query) {
+  return request({
+    url: '/stats/everyDay/export',
+    method: 'post',
+    data: query
+  })
+}
+
+export function listTodayList(query) {
+  return request({
+    url: '/stats/everyDay/pageList',
+    method: 'post',
+    data: query
+  })
+}
+
+// 查询员工完成统计详细
+export function getEmployeeStats(id) {
+  return request({
+    url: '/system/employeeStats/' + id,
+    method: 'get'
+  })
+}
+
+// 获取员工列表
+export function getEmployeeList() {
+  return request({
+    url: '/system/employee/list',
+    method: 'get'
+  })
+}
+
+// 获取频道列表
+export function getChannelList() {
+  return request({
+    url: '/system/channel/list',
+    method: 'get'
+  })
+}
+
+// 导出员工完成统计
+export function exportEmployeeStats(query) {
+  return request({
+    url: '/system/employeeStats/export',
+    method: 'post',
+    data: query
+  })
+}
+
+// 获取SOP任务数据
+export function getSOPTaskData(param){
+  return request({
+    url: '/stats/sopTaskData',
+    method: 'post',
+    data: param
+  })
+}
+
+// 获取部门数据
+export function getDeptData(param){
+  return request({
+    url: '/stats/getDeptData',
+    method: 'get'
+  })
+}

src/components/Pagination/index.vue

@@ -36,7 +36,7 @@ export default {
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [10, 20, 30, 50,100,200,300]
       }
     },
     // 移动端页码按钮的数量端默认值5

src/components/TreeSelect/dateRange.vue

@@ -0,0 +1,1074 @@
+<template>
+  <div class="task-select-tree" :style="{ width: componentWidth }">
+    <el-popover
+      ref="popover"
+      placement="bottom-start"
+      :width="popoverComputedWidth"
+      trigger="click"
+      v-model="popoverVisible"
+      popper-class="task-select-tree-popper"
+      :disabled="disabled"
+      @show="onPopoverShow"
+    >
+      <div class="popover-content-wrapper">
+        <el-date-picker v-model="dateRange"
+                        size="small"
+                        style="width: 220px"
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="营期开始日期"
+                        end-placeholder="营期结束日期"
+        @change="dateRangeChange"/>
+        &nbsp;<button type="primary" @click="dateRangeChange(dateRange)">查询</button>
+        <br/>
+        <br/>
+        <el-input
+          v-if="filterable"
+          placeholder="输入关键字过滤"
+          v-model="filterText"
+          size="mini"
+          clearable
+          class="filter-input"
+          @input="handleFilterDebounced"
+        >
+        </el-input>
+
+        <div class="tree-container" :style="{ height: treeHeight + 'px' }">
+          <div
+            ref="virtualList"
+            class="virtual-tree-list"
+            @scroll="handleScroll"
+            :style="{ height: treeHeight + 'px', overflow: 'auto' }"
+          >
+            <div
+              class="virtual-content"
+              :style="{
+                height: totalHeight + 'px',
+                position: 'relative',
+                paddingTop: offsetY + 'px'
+              }"
+            >
+              <div
+                v-for="(item, index) in visibleItems"
+                :key="`${item.key}-${item.level}-${index}`"
+                :style="{
+                  height: itemHeight + 'px',
+                  paddingLeft: (item.level * indentSize) + 'px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  position: 'relative'
+                }"
+                :class="[
+                  'virtual-tree-node',
+                  {
+                    'is-leaf': item.isLeaf,
+                    'is-checked': checkedKeysSet.has(item.key) && (item.isLeaf || parentSelectable || !checkStrictly),
+                    'is-disabled': item.nodeDisabled || checkboxDisabled(item) // Combined disabled state for row styling
+                  }
+                ]"
+                @click="handleNodeClick(item)"
+              >
+                <div class="node-expand-container">
+                  <i
+                    v-if="!item.isLeaf"
+                    :class="[
+                      'node-expand-icon',
+                      item.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
+                    ]"
+                    @click.stop="toggleNodeExpand(item)"
+                  ></i>
+                  <span v-else class="node-expand-placeholder"></span>
+                </div>
+
+                <el-checkbox
+                  :value="checkedKeysSet.has(item.key)"
+                  :disabled="checkboxDisabled(item)"
+                  @change="handleCheckboxChange(item, $event)"
+                  @click.stop
+                  class="node-checkbox"
+                ></el-checkbox>
+
+                <span class="node-label" :title="item.label">{{ item.label }}</span>
+
+                <span v-if="item.isLeaf && showNodeDetail" class="node-detail-text">
+                  (ID: {{ item.originalData.qwUserId || item.originalData.id }}{{ item.originalData.taskExecDate ? ' ' + item.originalData.taskExecDate : '' }})
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="popover-footer">
+          <span class="selected-count">已选择: {{ displaySelectedCount }}</span>
+          <el-button size="mini" @click="handleClearInPopover">清空</el-button>
+          <el-button size="mini" type="primary" @click="handleSelectAllToggle">{{ isCurrentSelectionAll ? '取消全选' : '全选' }}</el-button>
+          <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
+        </div>
+      </div>
+
+      <div
+        slot="reference"
+        :class="['select-trigger-wrapper', { 'is-disabled': disabled, 'is-active': popoverVisible }]"
+        @mouseenter="inputHovering = true"
+        @mouseleave="inputHovering = false"
+      >
+        <div class="tags-or-value-container">
+          <template v-if="multiple && displaySelectedNodes.length > 0">
+            <el-tag
+              v-for="node in displaySelectedNodes"
+              :key="node.key"
+              type="info"
+              size="small"
+              closable
+              :disable-transitions="true"
+              @close.stop="removeTag(node)"
+              class="trigger-tag"
+            >
+              {{ node.label }}
+            </el-tag>
+            <el-tag
+              v-if="displaySelectedCount > maxDisplayTags && displaySelectedNodes.length === maxDisplayTags"
+              type="info"
+              size="small"
+              class="trigger-tag"
+            >
+              + {{ displaySelectedCount - maxDisplayTags }}
+            </el-tag>
+          </template>
+          <span v-else-if="!multiple && displaySelectedCount > 0" class="single-value-display">
+            {{ singleSelectedLabel }}
+          </span>
+          <span v-else class="placeholder-text">{{ placeholder }}</span>
+        </div>
+
+        <span class="icons-container">
+          <i
+            v-if="showClearIcon"
+            class="el-icon-circle-close clear-icon"
+            @click.stop="handleClearOnTrigger"
+          ></i>
+          <i :class="['el-icon-arrow-up', 'arrow-icon', { 'is-reverse': !popoverVisible }]"></i>
+        </span>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+// 防抖函数
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+export default {
+  name: 'OptimizedSelectTree',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    rawData: {
+      type: Array,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    disabled: { // Global disabled for the component
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false // Important for parent-child linkage
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    dateRange: {
+      type: Array,
+      default: null
+    },
+    maxDisplayTags: {
+      type: Number,
+      default: 2
+    },
+    componentWidth: {
+      type: String,
+      default: '100%'
+    },
+    popoverWidth: {
+      type: [String, Number],
+      default: 'auto'
+    },
+    treeProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'label',
+        isLeaf: 'isLeaf',
+        disabled: 'disabled' // Key for disabled state in rawData
+      })
+    },
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    showNodeDetail: {
+      type: Boolean,
+      default: true
+    },
+    treeHeight: {
+      type: Number,
+      default: 280
+    },
+    returnLeafOnly: {
+      // This prop's effect on output is now overridden.
+      // It might still be used by consumers for other logic if they rely on its original meaning.
+      type: Boolean,
+      default: true
+    },
+    parentSelectable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      popoverVisible: false,
+      filterText: '',
+      inputHovering: false,
+      triggerElRect: null,
+      itemHeight: 36,
+      indentSize: 24,
+      startIndex: 0,
+      endIndex: 0,
+      scrollTop: 0,
+      visibleItemCount: 0,
+      flattenedNodes: [],
+      nodeMap: new Map(),
+      checkedKeysSet: new Set(),
+      expandedKeysSet: new Set(),
+      updateTimer: null
+    };
+  },
+  computed: {
+    targetLeafNodes() {
+      if (this.filterText.trim()) {
+        return this.currentResultLeafNodes;
+      }
+      return this.allSelectableLeafNodes;
+    },
+
+    isCurrentSelectionAll() {
+      const nodes = this.targetLeafNodes;
+      if (nodes.length === 0) return false;
+      return nodes.every(node => this.checkedKeysSet.has(node.key));
+    },
+    popoverComputedWidth() {
+      if (this.popoverWidth === 'auto') {
+        return this.triggerElRect ? this.triggerElRect.width : 300;
+      }
+      return parseInt(this.popoverWidth, 10);
+    },
+    totalHeight() {
+      return this.visibleNodes.length * this.itemHeight;
+    },
+    offsetY() {
+      return this.startIndex * this.itemHeight;
+    },
+    visibleNodes() {
+      let nodes = this.flattenedNodes;
+      if (this.filterText.trim()) {
+        nodes = this.applyFilter(this.flattenedNodes);
+      }
+
+      const visible = [];
+      for (const node of nodes) {
+        if (this.isNodeCurrentlyVisible(node)) {
+          visible.push(node);
+        }
+      }
+      return visible;
+    },
+    visibleItems() {
+      const items = this.visibleNodes.slice(this.startIndex, this.endIndex);
+      return items.map(node => ({
+        ...node,
+        expanded: this.expandedKeysSet.has(node.key)
+      }));
+    },
+    // Actual count of selected leaf items
+    displaySelectedCount() {
+      let leafCount = 0;
+      this.checkedKeysSet.forEach(key => {
+        const node = this.nodeMap.get(key);
+        if (node && node.isLeaf) {
+          leafCount++;
+        }
+      });
+      return leafCount;
+    },
+    displaySelectedNodes() {
+      if (!this.multiple) return [];
+      const resultNodes = [];
+      Array.from(this.checkedKeysSet)
+        .map(key => this.nodeMap.get(key))
+        .filter(Boolean)
+        .forEach(node => {
+          // Always display tags for leaf nodes that are selected.
+          if (node.isLeaf) {
+            resultNodes.push(node);
+          }
+        });
+      return resultNodes.slice(0, this.maxDisplayTags);
+    },
+    singleSelectedLabel() {
+      if (this.multiple || this.value.length === 0) return '';
+      // 'value' prop should only contain leaf keys due to emitChange modification.
+      // For single select, value should have at most one key.
+      const selectedKey = String(this.value[0]);
+      const node = this.nodeMap.get(selectedKey);
+      // We expect 'value' to contain a leaf key.
+      return node ? node.label : '';
+    },
+    showClearIcon() {
+      return (
+        !this.disabled &&
+        this.inputHovering &&
+        this.displaySelectedCount > 0 && // Based on leaf count now
+        !this.multiple
+      );
+    },
+    // 计算当前搜索结果中的所有叶子节点
+    currentResultLeafNodes() {
+      return this.visibleNodes.filter(node => node.isLeaf && !this.checkboxDisabled(node));
+    },
+    // 判断当前搜索结果是否全部选中
+    isAllCurrentResultsSelected() {
+      const leafNodes = this.currentResultLeafNodes;
+      if (leafNodes.length === 0) return false;
+      return leafNodes.every(node => this.checkedKeysSet.has(node.key));
+    }, // 新增：计算所有可选叶子节点
+    allSelectableLeafNodes() {
+      return this.flattenedNodes.filter(node => node.isLeaf && !this.checkboxDisabled(node));
+    },
+
+    // 新增：判断是否所有数据都被选中
+    isAllDataSelected() {
+      const allLeafNodes = this.allSelectableLeafNodes;
+      if (allLeafNodes.length === 0) return false;
+      return allLeafNodes.every(node => this.checkedKeysSet.has(node.key));
+    }
+  },
+  watch: {
+    rawData: {
+      handler(newData) {
+        this.processRawData(newData);
+        this.syncCheckedKeysFromValue();
+      },
+      immediate: true
+    },
+    value: {
+      handler() {
+        this.syncCheckedKeysFromValue();
+      },
+      deep: true,
+    },
+    filterText: {
+      handler() {
+        this.resetScroll();
+      }
+    },
+    popoverVisible(isVisible) {
+      if (isVisible) {
+        this.$nextTick(() => {
+          this.calculateVisibleRange();
+        });
+      }
+    }
+  },
+  created() {
+    this.handleFilterDebounced = debounce(this.filterTextChange, 300);
+    this.visibleItemCount = Math.ceil(this.treeHeight / this.itemHeight) + 5;
+  },
+  methods: {
+    dateRangeChange(e){
+      this.$emit("dateRangeChange",e)
+    },
+    filterTextChange() {
+      this.resetScroll();
+    },
+    processRawData(data) {
+      if (!Array.isArray(data)) {
+        this.flattenedNodes = [];
+        this.nodeMap.clear();
+        return;
+      }
+
+      const flattened = [];
+      const nodeMap = new Map();
+      const expandedKeys = new Set();
+
+      const processNode = (node, level = 0, parentKey = null) => {
+        const children = node[this.treeProps.children] || [];
+        const hasChildren = children.length > 0;
+        const key = node[this.nodeKey];
+
+        if (key === undefined || key === null) {
+          console.warn('Node lacks a unique key:', node);
+          return;
+        }
+        const strKey = String(key);
+
+        let label = node[this.treeProps.label];
+        if (typeof label !== 'string' || label.trim() === '') {
+          label = node.name || node.title || node.text || `Node-${strKey}`;
+        }
+
+        const nodeDisabledByData = !!node[this.treeProps.disabled];
+
+        const processedNode = {
+          key: strKey,
+          label: String(label).trim(),
+          level,
+          isLeaf: !hasChildren,
+          nodeDisabled: nodeDisabledByData,
+          parentKey: parentKey ? String(parentKey) : null,
+          childrenKeys: hasChildren ? children.map(child => String(child[this.nodeKey])).filter(k => k !== undefined && k !== null) : [],
+          originalData: node,
+          hasChildren
+        };
+
+        flattened.push(processedNode);
+        nodeMap.set(processedNode.key, processedNode);
+
+        if (this.defaultExpandAll && hasChildren && !nodeDisabledByData) {
+          expandedKeys.add(processedNode.key);
+        }
+
+        if (hasChildren) {
+          children.forEach(child => processNode(child, level + 1, strKey));
+        }
+      };
+
+      data.forEach(node => processNode(node));
+
+      this.flattenedNodes = flattened;
+      this.nodeMap = nodeMap;
+      this.expandedKeysSet = new Set(expandedKeys);
+    },
+
+    isNodeCurrentlyVisible(node, currentExpandedSet = this.expandedKeysSet) {
+      if (node.level === 0) return true;
+      let current = node;
+      while (current.parentKey) {
+        const parent = this.nodeMap.get(current.parentKey);
+        if (!parent || !currentExpandedSet.has(parent.key)) {
+          return false;
+        }
+        current = parent;
+      }
+      return true;
+    },
+
+    applyFilter(nodesToFilter) {
+      const searchText = this.filterText.toLowerCase().trim();
+      if (!searchText) return nodesToFilter;
+
+      const matchedNodeKeys = new Set();
+      const newExpandedKeys = new Set(this.expandedKeysSet);
+
+      nodesToFilter.forEach(node => {
+        if (node.label.toLowerCase().includes(searchText)) {
+          matchedNodeKeys.add(node.key);
+          let parentKey = node.parentKey;
+          while (parentKey) {
+            const parentNode = this.nodeMap.get(parentKey);
+            if (parentNode) {
+              newExpandedKeys.add(parentKey);
+              parentKey = parentNode.parentKey;
+            } else {
+              break;
+            }
+          }
+        }
+      });
+
+      const filteredResult = nodesToFilter.filter(node => {
+        return this.hasMatchInSubtreeOrSelf(node, searchText);
+      });
+
+      this.expandedKeysSet = newExpandedKeys;
+      return filteredResult;
+    },
+    hasMatchInSubtreeOrSelf(node, searchText) {
+      if (node.label.toLowerCase().includes(searchText)) {
+        return true;
+      }
+      if (!node.isLeaf) {
+        for (const childKey of node.childrenKeys) {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode && this.hasMatchInSubtreeOrSelf(childNode, searchText)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    checkboxDisabled(item) {
+      if (item.nodeDisabled) return true;
+      if (this.checkStrictly && !item.isLeaf && !this.parentSelectable) {
+        return true;
+      }
+      return false;
+    },
+
+    calculateVisibleRange() {
+      const containerHeight = this.treeHeight;
+      const totalItems = this.visibleNodes.length;
+
+      const newStartIndex = Math.floor(this.scrollTop / this.itemHeight);
+      const visibleCountInViewport = Math.ceil(containerHeight / this.itemHeight);
+
+      const buffer = 5;
+      this.startIndex = Math.max(0, newStartIndex - buffer);
+      this.endIndex = Math.min(totalItems, newStartIndex + visibleCountInViewport + buffer);
+    },
+    handleScroll(e) {
+      const newScrollTop = e.target.scrollTop;
+      if (newScrollTop !== this.scrollTop) {
+        this.scrollTop = newScrollTop;
+        if (!this.scrollRAF) {
+          this.scrollRAF = requestAnimationFrame(() => {
+            this.calculateVisibleRange();
+            this.scrollRAF = null;
+          });
+        }
+      }
+    },
+    resetScroll() {
+      this.scrollTop = 0;
+      if (this.$refs.virtualList) {
+        this.$refs.virtualList.scrollTop = 0;
+      }
+      this.$nextTick(() => {
+        this.calculateVisibleRange();
+      });
+    },
+    toggleNodeExpand(node) {
+      if (node.isLeaf || node.nodeDisabled) return;
+      const key = node.key;
+      if (this.expandedKeysSet.has(key)) {
+        this.expandedKeysSet.delete(key);
+      } else {
+        this.expandedKeysSet.add(key);
+      }
+      this.expandedKeysSet = new Set(this.expandedKeysSet);
+      this.$nextTick(() => this.calculateVisibleRange());
+    },
+    handleNodeClick(node) {
+      if (node.nodeDisabled) return;
+
+      if (!node.isLeaf && !this.parentSelectable) {
+        this.toggleNodeExpand(node);
+        return;
+      }
+      if (!node.isLeaf) {
+        this.toggleNodeExpand(node);
+        return;
+      }
+
+      if (!this.checkboxDisabled(node)) {
+        const isCurrentlyChecked = this.checkedKeysSet.has(node.key);
+        this.handleCheckboxChange(node, !isCurrentlyChecked);
+      }
+    },
+    handleCheckboxChange(node, checked) {
+      if (this.checkboxDisabled(node)) return;
+
+      const newCheckedKeys = new Set(this.checkedKeysSet);
+      const canNodeItselfBeInSet = node.isLeaf || this.parentSelectable || !this.checkStrictly;
+
+      if (checked) {
+        if (!this.multiple) {
+          newCheckedKeys.clear();
+        }
+        if (canNodeItselfBeInSet) {
+          newCheckedKeys.add(node.key);
+        }
+        if (!this.checkStrictly) {
+          this.selectAllChildren(node, newCheckedKeys);
+          this.checkParentSelection(node, newCheckedKeys);
+        }
+      } else {
+        if (canNodeItselfBeInSet) {
+          newCheckedKeys.delete(node.key);
+        }
+        if (!this.checkStrictly) {
+          this.unselectAllChildren(node, newCheckedKeys);
+          this.uncheckParentSelection(node, newCheckedKeys);
+        }
+      }
+      this.checkedKeysSet = newCheckedKeys;
+      this.emitChange();
+    },
+    selectAllChildren(node, checkedKeys) {
+      if (node.childrenKeys && node.childrenKeys.length > 0) {
+        node.childrenKeys.forEach(childKey => {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode && !childNode.nodeDisabled) {
+            const canChildBeInSet = childNode.isLeaf || this.parentSelectable || !this.checkStrictly;
+            if(canChildBeInSet){
+              checkedKeys.add(childKey);
+            }
+            if (!childNode.isLeaf) {
+              this.selectAllChildren(childNode, checkedKeys);
+            }
+          }
+        });
+      }
+    },
+    unselectAllChildren(node, checkedKeys) {
+      if (node.childrenKeys && node.childrenKeys.length > 0) {
+        node.childrenKeys.forEach(childKey => {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode) {
+            const canChildBeInSet = childNode.isLeaf || this.parentSelectable || !this.checkStrictly;
+            if(canChildBeInSet){
+              checkedKeys.delete(childKey);
+            }
+            if (!childNode.isLeaf) {
+              this.unselectAllChildren(childNode, checkedKeys);
+            }
+          }
+        });
+      }
+    },
+    checkParentSelection(node, checkedKeys) {
+      if (!node.parentKey || this.checkStrictly) return;
+
+      const parentNode = this.nodeMap.get(node.parentKey);
+      if (parentNode && !parentNode.nodeDisabled && (this.parentSelectable || !this.checkStrictly)) {
+        const allChildrenChecked = parentNode.childrenKeys.every(childKey => {
+          const child = this.nodeMap.get(childKey);
+          return !child || child.nodeDisabled || checkedKeys.has(childKey);
+        });
+
+        if (allChildrenChecked) {
+          checkedKeys.add(parentNode.key);
+          this.checkParentSelection(parentNode, checkedKeys);
+        }
+      }
+    },
+    uncheckParentSelection(node, checkedKeys) {
+      if (!node.parentKey || this.checkStrictly) return;
+      const parentNode = this.nodeMap.get(node.parentKey);
+      if (parentNode && (this.parentSelectable || !this.checkStrictly)) {
+        if (checkedKeys.has(parentNode.key)) {
+          checkedKeys.delete(parentNode.key);
+          this.uncheckParentSelection(parentNode, checkedKeys);
+        }
+      }
+    },
+    emitChange() {
+      let finalKeys = [];
+      const currentInternalCheckedKeys = Array.from(this.checkedKeysSet);
+
+      // ALWAYS return only leaf nodes in the emitted value.
+      currentInternalCheckedKeys.forEach(key => {
+        const node = this.nodeMap.get(key);
+        if (node && node.isLeaf) {
+          finalKeys.push(key);
+        }
+      });
+
+      finalKeys = [...new Set(finalKeys)]; // Deduplicate
+      const finalNodes = finalKeys.map(k => this.nodeMap.get(k)).filter(Boolean);
+
+      this.$emit('input', finalKeys);
+      this.$emit('change', finalKeys, finalNodes);
+    },
+    syncCheckedKeysFromValue() {
+      const newCheckedKeys = new Set();
+      if (Array.isArray(this.value)) {
+        this.value.forEach(key => {
+          const strKey = String(key);
+          const node = this.nodeMap.get(strKey);
+          if (node) {
+            newCheckedKeys.add(strKey);
+            if (!node.isLeaf && !this.checkStrictly) {
+              this.selectAllChildren(node, newCheckedKeys);
+              this.checkParentSelection(node, newCheckedKeys);
+            } else if (node.isLeaf && !this.checkStrictly) {
+              this.checkParentSelection(node, newCheckedKeys);
+            }
+          }
+        });
+      }
+      this.checkedKeysSet = newCheckedKeys;
+
+      if(this.popoverVisible) {
+        this.$nextTick(() => this.calculateVisibleRange());
+      }
+    },
+    handleConfirm() {
+      this.emitChange();
+      this.popoverVisible = false;
+    },
+    handleClearInPopover() {
+      this.checkedKeysSet.clear();
+      this.emitChange();
+    },
+    handleClearOnTrigger() {
+      if (this.disabled) return;
+      this.checkedKeysSet.clear();
+      this.emitChange();
+      this.popoverVisible = false;
+    },
+    // 新增：处理全选/取消全选功能
+    handleSelectAllToggle() {
+      if (this.disabled) return;
+
+      const leafNodes = this.targetLeafNodes;
+      if (leafNodes.length === 0) return;
+
+      // 根据当前状态决定是全选还是取消全选
+      const shouldSelect = !this.isCurrentSelectionAll;
+
+      if (!this.multiple && shouldSelect) {
+        // 单选模式下，只选择第一个叶子节点
+        const firstLeaf = leafNodes[0];
+        if (firstLeaf) {
+          this.handleCheckboxChange(firstLeaf, true);
+        }
+        return;
+      }
+
+      const newCheckedKeys = new Set(this.checkedKeysSet);
+
+      leafNodes.forEach(node => {
+        if (this.checkboxDisabled(node)) return;
+
+        if (!this.checkStrictly) {
+          // 如果不是严格模式，需要处理父子节点关系
+          this.handleCheckboxChange(node, shouldSelect);
+        } else {
+          // 严格模式下直接添加或删除
+          if (shouldSelect) {
+            newCheckedKeys.add(node.key);
+          } else {
+            newCheckedKeys.delete(node.key);
+          }
+        }
+      });
+
+      if (this.checkStrictly) {
+        this.checkedKeysSet = newCheckedKeys;
+        this.emitChange();
+      }
+    },
+
+    // 新增：处理下拉菜单选择事件
+    handleSelectAllCommand(command) {
+      this.handleSelectAllToggle(command);
+    },
+    removeTag(nodeToRemove) {
+      if (this.disabled || this.checkboxDisabled(nodeToRemove)) return;
+      // nodeToRemove here will be a leaf node because displaySelectedNodes only gives leaf nodes
+      this.handleCheckboxChange(nodeToRemove, false);
+    },
+    onPopoverShow() {
+      if (this.$refs.popover && this.$refs.popover.$refs.reference) {
+        this.triggerElRect = this.$refs.popover.$refs.reference.getBoundingClientRect();
+      }
+      this.$nextTick(() => {
+        this.resetScroll();
+        if (this.filterable && this.$refs.popover && this.$refs.popover.$el) {
+          const inputEl = this.$refs.popover.$el.querySelector('.filter-input input');
+          if (inputEl) inputEl.focus();
+        }
+      });
+    }
+  },
+  beforeDestroy() {
+    if (this.updateTimer) clearTimeout(this.updateTimer);
+    if (this.scrollRAF) cancelAnimationFrame(this.scrollRAF);
+  }
+};
+</script>
+
+<style scoped>
+.task-select-tree {
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+}
+
+.select-trigger-wrapper {
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  display: flex;
+  align-items: center;
+  min-height: 32px; /* Element UI default input height */
+  padding: 0 30px 0 10px;
+  position: relative;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  width: 100%;
+  cursor: pointer;
+  overflow: hidden; /* To contain tags */
+}
+
+.select-trigger-wrapper.is-disabled {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.select-trigger-wrapper:hover:not(.is-disabled) {
+  border-color: #c0c4cc;
+}
+
+.select-trigger-wrapper.is-active:not(.is-disabled) {
+  border-color: #409eff;
+}
+
+.tags-or-value-container {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap; /* Allow tags to wrap */
+  gap: 4px; /* Space between tags */
+  align-items: center;
+  overflow: hidden; /* Hide overflowed tags/text */
+  padding: 2px 0; /* Minimal padding for tags */
+  min-height: 28px; /* Ensure container has some height */
+}
+
+
+.single-value-display,
+.placeholder-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 28px; /* Align with tags/input field */
+}
+
+.single-value-display {
+  color: #606266;
+}
+
+.placeholder-text {
+  color: #c0c4cc;
+}
+
+.icons-container {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: #c0c4cc;
+  height: 100%;
+}
+
+.clear-icon {
+  cursor: pointer;
+  margin-right: 5px;
+  display: none; /* Hidden by default */
+  font-size: 14px;
+}
+
+.select-trigger-wrapper:hover .clear-icon {
+  display: inline-block; /* Show on hover */
+}
+.select-trigger-wrapper.is-disabled .clear-icon {
+  display: none !important; /* Never show if component is disabled */
+}
+
+
+.arrow-icon {
+  transition: transform .3s;
+  font-size: 14px;
+}
+
+.arrow-icon.is-reverse {
+  transform: rotate(180deg);
+}
+
+.tree-container {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-top: 8px; /* If filter input is present */
+}
+
+.virtual-tree-list {
+  position: relative; /* For absolute positioning of virtual-content if needed */
+}
+
+.virtual-content {
+  width: 100%; /* Ensure full width */
+}
+
+.virtual-tree-node {
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid #f5f7fa; /* Lighter border */
+  transition: background-color 0.2s;
+  min-height: 36px; /* Ensure consistency with itemHeight */
+}
+.virtual-tree-node:last-child {
+  border-bottom: none;
+}
+
+.virtual-tree-node:hover:not(.is-disabled) {
+  background-color: #f5f7fa;
+}
+
+.virtual-tree-node.is-checked:not(.is-disabled) {
+  /* color: #409eff; */
+}
+.virtual-tree-node.is-checked .node-label {
+  /* font-weight: bold; */
+}
+
+
+.virtual-tree-node.is-disabled {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-color: #f5f7fa;
+}
+.virtual-tree-node.is-disabled .node-label {
+  color: #c0c4cc;
+}
+
+
+.node-expand-container {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.node-expand-icon {
+  cursor: pointer;
+  color: #c0c4cc;
+  transition: transform 0.2s, color 0.2s;
+  font-size: 12px;
+}
+
+.node-expand-icon:hover {
+  color: #409eff;
+}
+
+.node-expand-placeholder {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+
+.node-checkbox {
+  margin: 0 8px 0 4px;
+  flex-shrink: 0;
+}
+
+.node-label {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+  font-weight: normal;
+  padding-right: 5px;
+}
+
+.node-detail-text {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 8px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.popover-content-wrapper {
+  max-width: 100%;
+}
+
+.popover-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: 1px solid #ebeef5;
+  margin-top: 10px;
+}
+
+.selected-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.filter-input {
+  margin-bottom: 8px;
+}
+
+.trigger-tag {
+  margin: 1px 0;
+  max-width: 150px;
+}
+
+.trigger-tag >>> .el-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
+<style>
+/* Global styles for popper, if needed */
+.task-select-tree-popper.el-popover {
+  padding: 12px;
+}
+
+.task-select-tree-popper .el-checkbox__input.is-disabled .el-checkbox__inner {
+  background-color: #edf2fc;
+  border-color: #dcdfe6;
+  cursor: not-allowed;
+}
+
+.task-select-tree-popper .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.task-select-tree-popper .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: #f2f6fc;
+  border-color: #dcdfe6;
+}
+</style>

src/components/TreeSelect/index.vue

@@ -0,0 +1,978 @@
+<template>
+  <div class="task-select-tree" :style="{ width: componentWidth }">
+    <el-popover
+      ref="popover"
+      placement="bottom-start"
+      :width="popoverComputedWidth"
+      trigger="click"
+      v-model="popoverVisible"
+      popper-class="task-select-tree-popper"
+      :disabled="disabled"
+      @show="onPopoverShow"
+    >
+      <div class="popover-content-wrapper">
+        <el-input
+          v-if="filterable"
+          placeholder="输入关键字过滤"
+          v-model="filterText"
+          size="mini"
+          clearable
+          class="filter-input"
+          @input="handleFilterDebounced"
+        >
+        </el-input>
+
+        <div class="tree-container" :style="{ height: treeHeight + 'px' }">
+          <div
+            ref="virtualList"
+            class="virtual-tree-list"
+            @scroll="handleScroll"
+            :style="{ height: treeHeight + 'px', overflow: 'auto' }"
+          >
+            <div
+              class="virtual-content"
+              :style="{
+                height: totalHeight + 'px',
+                position: 'relative',
+                paddingTop: offsetY + 'px'
+              }"
+            >
+              <div
+                v-for="(item, index) in visibleItems"
+                :key="`${item.key}-${item.level}-${index}`"
+                :style="{
+                  height: itemHeight + 'px',
+                  paddingLeft: (item.level * indentSize) + 'px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  position: 'relative'
+                }"
+                :class="[
+                  'virtual-tree-node',
+                  {
+                    'is-leaf': item.isLeaf,
+                    'is-checked': checkedKeysSet.has(item.key) && (item.isLeaf || parentSelectable || !checkStrictly),
+                    'is-disabled': item.nodeDisabled || checkboxDisabled(item) // Combined disabled state for row styling
+                  }
+                ]"
+                @click="handleNodeClick(item)"
+              >
+                <div class="node-expand-container">
+                  <i
+                    v-if="!item.isLeaf"
+                    :class="[
+                      'node-expand-icon',
+                      item.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
+                    ]"
+                    @click.stop="toggleNodeExpand(item)"
+                  ></i>
+                  <span v-else class="node-expand-placeholder"></span>
+                </div>
+
+                <el-checkbox
+                  :value="checkedKeysSet.has(item.key)"
+                  :disabled="checkboxDisabled(item)"
+                  @change="handleCheckboxChange(item, $event)"
+                  @click.stop
+                  class="node-checkbox"
+                ></el-checkbox>
+
+                <span class="node-label" :title="item.label">{{ item.label }}</span>
+
+                <span v-if="item.isLeaf && showNodeDetail" class="node-detail-text">
+                  (ID: {{ item.originalData.qwUserId || item.originalData.id }}{{ item.originalData.taskExecDate ? ' ' + item.originalData.taskExecDate : '' }})
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="popover-footer">
+          <span class="selected-count">已选择: {{ displaySelectedCount }}</span>
+          <el-button size="mini" @click="handleClearInPopover">清空</el-button>
+          <el-button type="primary" size="mini" @click="handleConfirm">确定</el-button>
+        </div>
+      </div>
+
+      <div
+        slot="reference"
+        :class="['select-trigger-wrapper', { 'is-disabled': disabled, 'is-active': popoverVisible }]"
+        @mouseenter="inputHovering = true"
+        @mouseleave="inputHovering = false"
+      >
+        <div class="tags-or-value-container">
+          <template v-if="multiple && displaySelectedNodes.length > 0">
+            <el-tag
+              v-for="node in displaySelectedNodes"
+              :key="node.key"
+              type="info"
+              size="small"
+              closable
+              :disable-transitions="true"
+              @close.stop="removeTag(node)"
+              class="trigger-tag"
+            >
+              {{ node.label }}
+            </el-tag>
+            <el-tag
+              v-if="displaySelectedCount > maxDisplayTags && displaySelectedNodes.length === maxDisplayTags"
+              type="info"
+              size="small"
+              class="trigger-tag"
+            >
+              + {{ displaySelectedCount - maxDisplayTags }}
+            </el-tag>
+          </template>
+          <span v-else-if="!multiple && displaySelectedCount > 0" class="single-value-display">
+            {{ singleSelectedLabel }}
+          </span>
+          <span v-else class="placeholder-text">{{ placeholder }}</span>
+        </div>
+
+        <span class="icons-container">
+          <i
+            v-if="showClearIcon"
+            class="el-icon-circle-close clear-icon"
+            @click.stop="handleClearOnTrigger"
+          ></i>
+          <i :class="['el-icon-arrow-up', 'arrow-icon', { 'is-reverse': !popoverVisible }]"></i>
+        </span>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+// 防抖函数
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+export default {
+  name: 'OptimizedSelectTree',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    rawData: {
+      type: Array,
+      required: true
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    disabled: { // Global disabled for the component
+      type: Boolean,
+      default: false
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false // Important for parent-child linkage
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    maxDisplayTags: {
+      type: Number,
+      default: 2
+    },
+    componentWidth: {
+      type: String,
+      default: '100%'
+    },
+    popoverWidth: {
+      type: [String, Number],
+      default: 'auto'
+    },
+    treeProps: {
+      type: Object,
+      default: () => ({
+        children: 'children',
+        label: 'label',
+        isLeaf: 'isLeaf',
+        disabled: 'disabled' // Key for disabled state in rawData
+      })
+    },
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    showNodeDetail: {
+      type: Boolean,
+      default: true
+    },
+    treeHeight: {
+      type: Number,
+      default: 280
+    },
+    returnLeafOnly: {
+      // This prop's effect on output is now overridden.
+      // It might still be used by consumers for other logic if they rely on its original meaning.
+      type: Boolean,
+      default: true
+    },
+    parentSelectable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      popoverVisible: false,
+      filterText: '',
+      inputHovering: false,
+      triggerElRect: null,
+      itemHeight: 36,
+      indentSize: 24,
+      startIndex: 0,
+      endIndex: 0,
+      scrollTop: 0,
+      visibleItemCount: 0,
+      flattenedNodes: [],
+      nodeMap: new Map(),
+      checkedKeysSet: new Set(),
+      expandedKeysSet: new Set(),
+      updateTimer: null
+    };
+  },
+  computed: {
+    popoverComputedWidth() {
+      if (this.popoverWidth === 'auto') {
+        return this.triggerElRect ? this.triggerElRect.width : 300;
+      }
+      return parseInt(this.popoverWidth, 10);
+    },
+    totalHeight() {
+      return this.visibleNodes.length * this.itemHeight;
+    },
+    offsetY() {
+      return this.startIndex * this.itemHeight;
+    },
+    visibleNodes() {
+      let nodes = this.flattenedNodes;
+      if (this.filterText.trim()) {
+        nodes = this.applyFilter(this.flattenedNodes);
+      }
+
+      const visible = [];
+      for (const node of nodes) {
+        if (this.isNodeCurrentlyVisible(node)) {
+          visible.push(node);
+        }
+      }
+      return visible;
+    },
+    visibleItems() {
+      const items = this.visibleNodes.slice(this.startIndex, this.endIndex);
+      return items.map(node => ({
+        ...node,
+        expanded: this.expandedKeysSet.has(node.key)
+      }));
+    },
+    // Actual count of selected leaf items
+    displaySelectedCount() {
+      let leafCount = 0;
+      this.checkedKeysSet.forEach(key => {
+        const node = this.nodeMap.get(key);
+        if (node && node.isLeaf) {
+          leafCount++;
+        }
+      });
+      return leafCount;
+    },
+    displaySelectedNodes() {
+      if (!this.multiple) return [];
+      const resultNodes = [];
+      Array.from(this.checkedKeysSet)
+        .map(key => this.nodeMap.get(key))
+        .filter(Boolean)
+        .forEach(node => {
+          // Always display tags for leaf nodes that are selected.
+          if (node.isLeaf) {
+            resultNodes.push(node);
+          }
+        });
+      return resultNodes.slice(0, this.maxDisplayTags);
+    },
+    singleSelectedLabel() {
+      if (this.multiple || this.value.length === 0) return '';
+      // 'value' prop should only contain leaf keys due to emitChange modification.
+      // For single select, value should have at most one key.
+      const selectedKey = String(this.value[0]);
+      const node = this.nodeMap.get(selectedKey);
+      // We expect 'value' to contain a leaf key.
+      return node ? node.label : '';
+    },
+    showClearIcon() {
+      return (
+        !this.disabled &&
+        this.inputHovering &&
+        this.displaySelectedCount > 0 && // Based on leaf count now
+        !this.multiple
+      );
+    }
+  },
+  watch: {
+    rawData: {
+      handler(newData) {
+        this.processRawData(newData);
+        this.syncCheckedKeysFromValue();
+      },
+      immediate: true
+    },
+    value: {
+      handler() {
+        this.syncCheckedKeysFromValue();
+      },
+      deep: true,
+    },
+    filterText: {
+      handler() {
+        this.resetScroll();
+      }
+    },
+    popoverVisible(isVisible) {
+      if (isVisible) {
+        this.$nextTick(() => {
+          this.calculateVisibleRange();
+        });
+      }
+    }
+  },
+  created() {
+    this.handleFilterDebounced = debounce(this.filterTextChange, 300);
+    this.visibleItemCount = Math.ceil(this.treeHeight / this.itemHeight) + 5;
+  },
+  methods: {
+    filterTextChange() {
+      this.resetScroll();
+    },
+    processRawData(data) {
+      if (!Array.isArray(data)) {
+        this.flattenedNodes = [];
+        this.nodeMap.clear();
+        return;
+      }
+
+      const flattened = [];
+      const nodeMap = new Map();
+      const expandedKeys = new Set();
+
+      const processNode = (node, level = 0, parentKey = null) => {
+        const children = node[this.treeProps.children] || [];
+        const hasChildren = children.length > 0;
+        const key = node[this.nodeKey];
+
+        if (key === undefined || key === null) {
+          console.warn('Node lacks a unique key:', node);
+          return;
+        }
+        const strKey = String(key);
+
+        let label = node[this.treeProps.label];
+        if (typeof label !== 'string' || label.trim() === '') {
+          label = node.name || node.title || node.text || `Node-${strKey}`;
+        }
+
+        const nodeDisabledByData = !!node[this.treeProps.disabled];
+
+        const processedNode = {
+          key: strKey,
+          label: String(label).trim(),
+          level,
+          isLeaf: !hasChildren,
+          nodeDisabled: nodeDisabledByData,
+          parentKey: parentKey ? String(parentKey) : null,
+          childrenKeys: hasChildren ? children.map(child => String(child[this.nodeKey])).filter(k => k !== undefined && k !== null) : [],
+          originalData: node,
+          hasChildren
+        };
+
+        flattened.push(processedNode);
+        nodeMap.set(processedNode.key, processedNode);
+
+        if (this.defaultExpandAll && hasChildren && !nodeDisabledByData) {
+          expandedKeys.add(processedNode.key);
+        }
+
+        if (hasChildren) {
+          children.forEach(child => processNode(child, level + 1, strKey));
+        }
+      };
+
+      data.forEach(node => processNode(node));
+
+      this.flattenedNodes = flattened;
+      this.nodeMap = nodeMap;
+      this.expandedKeysSet = new Set(expandedKeys);
+    },
+
+    isNodeCurrentlyVisible(node, currentExpandedSet = this.expandedKeysSet) {
+      if (node.level === 0) return true;
+      let current = node;
+      while (current.parentKey) {
+        const parent = this.nodeMap.get(current.parentKey);
+        if (!parent || !currentExpandedSet.has(parent.key)) {
+          return false;
+        }
+        current = parent;
+      }
+      return true;
+    },
+
+    applyFilter(nodesToFilter) {
+      const searchText = this.filterText.toLowerCase().trim();
+      if (!searchText) return nodesToFilter;
+
+      const matchedNodeKeys = new Set();
+      const newExpandedKeys = new Set(this.expandedKeysSet);
+
+      nodesToFilter.forEach(node => {
+        if (node.label.toLowerCase().includes(searchText)) {
+          matchedNodeKeys.add(node.key);
+          let parentKey = node.parentKey;
+          while (parentKey) {
+            const parentNode = this.nodeMap.get(parentKey);
+            if (parentNode) {
+              newExpandedKeys.add(parentKey);
+              parentKey = parentNode.parentKey;
+            } else {
+              break;
+            }
+          }
+        }
+      });
+
+      const filteredResult = nodesToFilter.filter(node => {
+        return this.hasMatchInSubtreeOrSelf(node, searchText);
+      });
+
+      this.expandedKeysSet = newExpandedKeys;
+      return filteredResult;
+    },
+    hasMatchInSubtreeOrSelf(node, searchText) {
+      if (node.label.toLowerCase().includes(searchText)) {
+        return true;
+      }
+      if (!node.isLeaf) {
+        for (const childKey of node.childrenKeys) {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode && this.hasMatchInSubtreeOrSelf(childNode, searchText)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    },
+    checkboxDisabled(item) {
+      if (item.nodeDisabled) return true;
+      if (this.checkStrictly && !item.isLeaf && !this.parentSelectable) {
+        return true;
+      }
+      return false;
+    },
+
+    calculateVisibleRange() {
+      const containerHeight = this.treeHeight;
+      const totalItems = this.visibleNodes.length;
+
+      const newStartIndex = Math.floor(this.scrollTop / this.itemHeight);
+      const visibleCountInViewport = Math.ceil(containerHeight / this.itemHeight);
+
+      const buffer = 5;
+      this.startIndex = Math.max(0, newStartIndex - buffer);
+      this.endIndex = Math.min(totalItems, newStartIndex + visibleCountInViewport + buffer);
+    },
+    handleScroll(e) {
+      const newScrollTop = e.target.scrollTop;
+      if (newScrollTop !== this.scrollTop) {
+        this.scrollTop = newScrollTop;
+        if (!this.scrollRAF) {
+          this.scrollRAF = requestAnimationFrame(() => {
+            this.calculateVisibleRange();
+            this.scrollRAF = null;
+          });
+        }
+      }
+    },
+    resetScroll() {
+      this.scrollTop = 0;
+      if (this.$refs.virtualList) {
+        this.$refs.virtualList.scrollTop = 0;
+      }
+      this.$nextTick(() => {
+        this.calculateVisibleRange();
+      });
+    },
+    toggleNodeExpand(node) {
+      if (node.isLeaf || node.nodeDisabled) return;
+      const key = node.key;
+      if (this.expandedKeysSet.has(key)) {
+        this.expandedKeysSet.delete(key);
+      } else {
+        this.expandedKeysSet.add(key);
+      }
+      this.expandedKeysSet = new Set(this.expandedKeysSet);
+      this.$nextTick(() => this.calculateVisibleRange());
+    },
+    handleNodeClick(node) {
+      if (node.nodeDisabled) return;
+
+      if (!node.isLeaf && !this.parentSelectable) {
+        this.toggleNodeExpand(node);
+        return;
+      }
+      if (!node.isLeaf) {
+        this.toggleNodeExpand(node);
+        return;
+      }
+
+      if (!this.checkboxDisabled(node)) {
+        const isCurrentlyChecked = this.checkedKeysSet.has(node.key);
+        this.handleCheckboxChange(node, !isCurrentlyChecked);
+      }
+    },
+    handleCheckboxChange(node, checked) {
+      if (this.checkboxDisabled(node)) return;
+
+      const newCheckedKeys = new Set(this.checkedKeysSet);
+      const canNodeItselfBeInSet = node.isLeaf || this.parentSelectable || !this.checkStrictly;
+
+      if (checked) {
+        if (!this.multiple) {
+          newCheckedKeys.clear();
+        }
+        if (canNodeItselfBeInSet) {
+          newCheckedKeys.add(node.key);
+        }
+        if (!this.checkStrictly) {
+          this.selectAllChildren(node, newCheckedKeys);
+          this.checkParentSelection(node, newCheckedKeys);
+        }
+      } else {
+        if (canNodeItselfBeInSet) {
+          newCheckedKeys.delete(node.key);
+        }
+        if (!this.checkStrictly) {
+          this.unselectAllChildren(node, newCheckedKeys);
+          this.uncheckParentSelection(node, newCheckedKeys);
+        }
+      }
+      this.checkedKeysSet = newCheckedKeys;
+      this.emitChange();
+    },
+    selectAllChildren(node, checkedKeys) {
+      if (node.childrenKeys && node.childrenKeys.length > 0) {
+        node.childrenKeys.forEach(childKey => {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode && !childNode.nodeDisabled) {
+            const canChildBeInSet = childNode.isLeaf || this.parentSelectable || !this.checkStrictly;
+            if(canChildBeInSet){
+              checkedKeys.add(childKey);
+            }
+            if (!childNode.isLeaf) {
+              this.selectAllChildren(childNode, checkedKeys);
+            }
+          }
+        });
+      }
+    },
+    unselectAllChildren(node, checkedKeys) {
+      if (node.childrenKeys && node.childrenKeys.length > 0) {
+        node.childrenKeys.forEach(childKey => {
+          const childNode = this.nodeMap.get(childKey);
+          if (childNode) {
+            const canChildBeInSet = childNode.isLeaf || this.parentSelectable || !this.checkStrictly;
+            if(canChildBeInSet){
+              checkedKeys.delete(childKey);
+            }
+            if (!childNode.isLeaf) {
+              this.unselectAllChildren(childNode, checkedKeys);
+            }
+          }
+        });
+      }
+    },
+    checkParentSelection(node, checkedKeys) {
+      if (!node.parentKey || this.checkStrictly) return;
+
+      const parentNode = this.nodeMap.get(node.parentKey);
+      if (parentNode && !parentNode.nodeDisabled && (this.parentSelectable || !this.checkStrictly)) {
+        const allChildrenChecked = parentNode.childrenKeys.every(childKey => {
+          const child = this.nodeMap.get(childKey);
+          return !child || child.nodeDisabled || checkedKeys.has(childKey);
+        });
+
+        if (allChildrenChecked) {
+          checkedKeys.add(parentNode.key);
+          this.checkParentSelection(parentNode, checkedKeys);
+        }
+      }
+    },
+    uncheckParentSelection(node, checkedKeys) {
+      if (!node.parentKey || this.checkStrictly) return;
+      const parentNode = this.nodeMap.get(node.parentKey);
+      if (parentNode && (this.parentSelectable || !this.checkStrictly)) {
+        if (checkedKeys.has(parentNode.key)) {
+          checkedKeys.delete(parentNode.key);
+          this.uncheckParentSelection(parentNode, checkedKeys);
+        }
+      }
+    },
+    emitChange() {
+      let finalKeys = [];
+      const currentInternalCheckedKeys = Array.from(this.checkedKeysSet);
+
+      // ALWAYS return only leaf nodes in the emitted value.
+      currentInternalCheckedKeys.forEach(key => {
+        const node = this.nodeMap.get(key);
+        if (node && node.isLeaf) {
+          finalKeys.push(key);
+        }
+      });
+
+      finalKeys = [...new Set(finalKeys)]; // Deduplicate
+      const finalNodes = finalKeys.map(k => this.nodeMap.get(k)).filter(Boolean);
+
+      this.$emit('input', finalKeys);
+      this.$emit('change', finalKeys, finalNodes);
+    },
+    syncCheckedKeysFromValue() {
+      const newCheckedKeys = new Set();
+      if (Array.isArray(this.value)) {
+        this.value.forEach(key => {
+          const strKey = String(key);
+          const node = this.nodeMap.get(strKey);
+          if (node) {
+            // Value should ideally contain leaf keys if controlled by this component.
+            // If an external value has a parent key, handle it for internal consistency.
+            newCheckedKeys.add(strKey);
+            if (!node.isLeaf && !this.checkStrictly) {
+              this.selectAllChildren(node, newCheckedKeys);
+              this.checkParentSelection(node, newCheckedKeys);
+            } else if (node.isLeaf && !this.checkStrictly) {
+              // If a leaf is added from value, ensure its parent's state is updated
+              this.checkParentSelection(node, newCheckedKeys);
+            }
+          }
+        });
+      }
+      this.checkedKeysSet = newCheckedKeys;
+
+      if(this.popoverVisible) {
+        this.$nextTick(() => this.calculateVisibleRange());
+      }
+    },
+    handleConfirm() {
+      this.emitChange(); // emitChange now handles filtering for leaf nodes
+      this.popoverVisible = false;
+    },
+    handleClearInPopover() {
+      this.checkedKeysSet.clear();
+      this.emitChange();
+    },
+    handleClearOnTrigger() {
+      if (this.disabled) return;
+      this.checkedKeysSet.clear();
+      this.emitChange();
+      this.popoverVisible = false;
+    },
+    removeTag(nodeToRemove) {
+      if (this.disabled || this.checkboxDisabled(nodeToRemove)) return;
+      // nodeToRemove here will be a leaf node because displaySelectedNodes only gives leaf nodes
+      this.handleCheckboxChange(nodeToRemove, false);
+    },
+    onPopoverShow() {
+      if (this.$refs.popover && this.$refs.popover.$refs.reference) {
+        this.triggerElRect = this.$refs.popover.$refs.reference.getBoundingClientRect();
+      }
+      this.$nextTick(() => {
+        this.resetScroll();
+        if (this.filterable && this.$refs.popover && this.$refs.popover.$el) {
+          const inputEl = this.$refs.popover.$el.querySelector('.filter-input input');
+          if (inputEl) inputEl.focus();
+        }
+      });
+    }
+  },
+  beforeDestroy() {
+    if (this.updateTimer) clearTimeout(this.updateTimer);
+    if (this.scrollRAF) cancelAnimationFrame(this.scrollRAF);
+  }
+};
+</script>
+
+<style scoped>
+.task-select-tree {
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+}
+
+.select-trigger-wrapper {
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  box-sizing: border-box;
+  color: #606266;
+  display: flex;
+  align-items: center;
+  min-height: 32px; /* Element UI default input height */
+  padding: 0 30px 0 10px;
+  position: relative;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+  width: 100%;
+  cursor: pointer;
+  overflow: hidden; /* To contain tags */
+}
+
+.select-trigger-wrapper.is-disabled {
+  background-color: #f5f7fa;
+  border-color: #e4e7ed;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.select-trigger-wrapper:hover:not(.is-disabled) {
+  border-color: #c0c4cc;
+}
+
+.select-trigger-wrapper.is-active:not(.is-disabled) {
+  border-color: #409eff;
+}
+
+.tags-or-value-container {
+  flex-grow: 1;
+  display: flex;
+  flex-wrap: wrap; /* Allow tags to wrap */
+  gap: 4px; /* Space between tags */
+  align-items: center;
+  overflow: hidden; /* Hide overflowed tags/text */
+  padding: 2px 0; /* Minimal padding for tags */
+  min-height: 28px; /* Ensure container has some height */
+}
+
+
+.single-value-display,
+.placeholder-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 28px; /* Align with tags/input field */
+}
+
+.single-value-display {
+  color: #606266;
+}
+
+.placeholder-text {
+  color: #c0c4cc;
+}
+
+.icons-container {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: #c0c4cc;
+  height: 100%;
+}
+
+.clear-icon {
+  cursor: pointer;
+  margin-right: 5px;
+  display: none; /* Hidden by default */
+  font-size: 14px;
+}
+
+.select-trigger-wrapper:hover .clear-icon {
+  display: inline-block; /* Show on hover */
+}
+.select-trigger-wrapper.is-disabled .clear-icon {
+  display: none !important; /* Never show if component is disabled */
+}
+
+
+.arrow-icon {
+  transition: transform .3s;
+  font-size: 14px;
+}
+
+.arrow-icon.is-reverse {
+  transform: rotate(180deg);
+}
+
+.tree-container {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fff;
+  margin-top: 8px; /* If filter input is present */
+}
+
+.virtual-tree-list {
+  position: relative; /* For absolute positioning of virtual-content if needed */
+}
+
+.virtual-content {
+  width: 100%; /* Ensure full width */
+}
+
+.virtual-tree-node {
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid #f5f7fa; /* Lighter border */
+  transition: background-color 0.2s;
+  min-height: 36px; /* Ensure consistency with itemHeight */
+}
+.virtual-tree-node:last-child {
+  border-bottom: none;
+}
+
+.virtual-tree-node:hover:not(.is-disabled) {
+  background-color: #f5f7fa;
+}
+
+.virtual-tree-node.is-checked:not(.is-disabled) {
+  /* color: #409eff; */
+}
+.virtual-tree-node.is-checked .node-label {
+  /* font-weight: bold; */
+}
+
+
+.virtual-tree-node.is-disabled {
+  color: #c0c4cc;
+  cursor: not-allowed;
+  background-color: #f5f7fa;
+}
+.virtual-tree-node.is-disabled .node-label {
+  color: #c0c4cc;
+}
+
+
+.node-expand-container {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.node-expand-icon {
+  cursor: pointer;
+  color: #c0c4cc;
+  transition: transform 0.2s, color 0.2s;
+  font-size: 12px;
+}
+
+.node-expand-icon:hover {
+  color: #409eff;
+}
+
+.node-expand-placeholder {
+  width: 12px;
+  height: 12px;
+  display: block;
+}
+
+
+.node-checkbox {
+  margin: 0 8px 0 4px;
+  flex-shrink: 0;
+}
+
+.node-label {
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+  font-weight: normal;
+  padding-right: 5px;
+}
+
+.node-detail-text {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 8px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.popover-content-wrapper {
+  max-width: 100%;
+}
+
+.popover-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 10px;
+  border-top: 1px solid #ebeef5;
+  margin-top: 10px;
+}
+
+.selected-count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.filter-input {
+  margin-bottom: 8px;
+}
+
+.trigger-tag {
+  margin: 1px 0;
+  max-width: 150px;
+}
+
+.trigger-tag >>> .el-tag__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
+<style>
+/* Global styles for popper, if needed */
+.task-select-tree-popper.el-popover {
+  padding: 12px;
+}
+
+.task-select-tree-popper .el-checkbox__input.is-disabled .el-checkbox__inner {
+  background-color: #edf2fc;
+  border-color: #dcdfe6;
+  cursor: not-allowed;
+}
+
+.task-select-tree-popper .el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #409eff;
+  border-color: #409eff;
+}
+.task-select-tree-popper .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+  background-color: #f2f6fc;
+  border-color: #dcdfe6;
+}
+</style>

src/views/statistics/index.vue

@@ -0,0 +1,1673 @@
+<template>
+  <div class="statistics-dashboard">
+    <!-- 数据概览 (Data Overview) -->
+    <el-card class="overview-section" shadow="never">
+      <div slot="header" class="header">
+        <span>数据概览</span>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-user-solid"></i>
+              分公司数量
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="dealderCount" :duration="3600" class="card-panel-num" /></div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-user"></i>
+              销售数量
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600" class="card-panel-num" />
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              会员数量
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" />
+              <span class="highlight-today-add">+{{todayIncreaseUserNum}}</span>
+            </div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              企微数量
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="qwMemberNum" :duration="3600" class="card-panel-num" /></div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-money"></i>
+              可用余额
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <span>今日消耗</span>
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
+            </div>
+            <div class="card-sub">
+              <span>昨日消耗（元）</span>
+              <span class="sub-value">
+                <count-to :start-val="0" :end-val="yesterdayComsumption" :duration="3600" class="card-panel-num" />
+              </span>
+            </div>
+            <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
+            <div class="card-desc">{{remainMessage}}</div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <span class="cdn-label">CDN</span>
+              今日
+            </div>
+            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}
+            </div>
+            <div class="card-sub">
+              <span>本月</span>
+              <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</span>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-message"></i>
+              短信剩余条数
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="smsRemainCount" :duration="3600" class="card-panel-num" />
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              平台今日看课人数
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
+            </div>
+            <div class="card-sub">
+              <span>配额上限</span>
+              <span class="sub-value">
+                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />/<count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" /></span>
+            </div>
+            <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false" color="#409EFF"></el-progress>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              订单总数
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="orderTotalNum" :duration="3600" class="card-panel-num" />
+              <span class="highlight-today-add">+{{todayOrderNum}}</span>
+            </div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              收款总数
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="recvTotalNum" :duration="3600" class="card-panel-num" />
+              <span class="highlight-today-add">+{{recvTodayNum}}</span>
+            </div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div class="data-card">
+            <div class="card-title">
+              <i class="el-icon-shopping-cart-full"></i>
+              商品总数
+            </div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="goodsTotalNum" :duration="3600" class="card-panel-num" />
+              <span class="highlight-today-add">+{{todayGoodsNum}}</span>
+            </div>
+            <div class="card-badge">
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <el-row :gutter="20" class="charts-section">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>本月订单数</span>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="dot viewer-dot"></span>
+                <span>订单数</span>
+              </div>
+              <div class="legend-item">
+                <span class="dot complete-dot"></span>
+                <span>订单金额</span>
+              </div>
+            </div>
+          </div>
+          <div ref="viewerOrderChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>本月收款数</span>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="dot viewer-dot"></span>
+                <span>收款数</span>
+              </div>
+              <div class="legend-item">
+                <span class="dot complete-dot"></span>
+                <span>收款金额</span>
+              </div>
+            </div>
+          </div>
+          <div ref="viewerReceiveChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br/>
+    <!-- 分析概览 (Analysis Overview) -->
+    <div class="analysis-section" shadow="never">
+      <div slot="header" class="header">
+        <span>分析概览</span>
+        <div class="tab-group">
+          <el-radio-group v-model="queryTime" size="medium" @change="handleAnalysis">
+            <el-radio-button label="今日"></el-radio-button>
+            <el-radio-button label="昨日"></el-radio-button>
+            <el-radio-button label="本周"></el-radio-button>
+            <el-radio-button label="本月"></el-radio-button>
+            <el-radio-button label="上月"></el-radio-button>
+          </el-radio-group>
+        </div>
+
+        <div class="action-group">
+          <el-radio-group v-model="userTypeText" @change="handleUserType">
+            <el-radio-button label="个微"></el-radio-button>
+            <el-radio-button label="企微"></el-radio-button>
+          </el-radio-group>
+
+          <el-dropdown @command="handleAutoRefresh" trigger="click">
+            <el-button size="small" plain>
+              自动刷新
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="0" :class="{ 'is-active': !autoRefreshInterval }">关闭</el-dropdown-item>
+              <el-dropdown-item :command="5" :class="{ 'is-active': autoRefreshInterval === 5 }">5分钟</el-dropdown-item>
+              <el-dropdown-item :command="10" :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
+              <el-dropdown-item :command="15" :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button size="small" plain icon="el-icon-refresh" type="primary" @click="manualRefresh">手动刷新</el-button>
+<!--          <el-button size="small" type="primary" @click="refresh">刷新</el-button>-->
+        </div>
+      </div>
+    </div>
+    <div>
+      <el-row :gutter="20">
+        <el-col :span="12" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''" @click="handleToggleDiv(0)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-monitor"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>观看人数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="watchUserCount" :duration="3600" class="card-panel-num" />
+                  </span>
+                </div>
+                <div class="card-row">
+                  <span>完播人数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="completedUserCount" :duration="3600" class="card-panel-num" />
+                  </span>
+                </div>
+                <div class="card-row">
+                  <span>完播率</span>
+                  <span class="highlight">{{completedRate}}%</span>
+                </div>
+              </div>
+            </div>
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-video-play"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>观看次数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="watchCount" :duration="3600" class="card-panel-num" /></span>
+                </div>
+                <div class="card-row">
+                  <span>完播次数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="completedCount" :duration="3600" class="card-panel-num" />
+                  </span>
+                </div>
+                <div class="card-row">
+                  <span>视频完播率</span>
+                  <span class="highlight">{{watchRate}}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"  @click="handleToggleDiv(1)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-headset"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>答题人数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="answerMemberCount" :duration="3600" class="card-panel-num" />
+                  </span>
+                </div>
+                <div class="card-row">
+                  <span>正确人数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="correctUserCount" :duration="3600" class="card-panel-num" />
+                    </span>
+                </div>
+                <div class="card-row">
+                  <span>正确率</span>
+                  <span class="highlight">{{correctRate}}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+        <el-col :span="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"  @click="handleToggleDiv(2)">
+            <div class="analysis-card">
+              <div class="card-icon"><i class="el-icon-present"></i></div>
+              <div class="card-content">
+                <div class="card-row">
+                  <span>答题红包个数</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="rewardCount" :duration="3600" class="card-panel-num" />
+                    </span>
+                </div>
+                <div class="card-row">
+                  <span>答题红包金额(元)</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="rewardMoney" :duration="3600" class="card-panel-num" /></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <!-- 图表区域 (Charts Area) -->
+    <transition name="fade">
+      <el-row :gutter="20" class="charts-section" v-show="selectedDiv===0">
+        <el-col :span="12">
+          <el-card shadow="never">
+            <div slot="header" class="chart-header">
+              <span>会员观看、完播人数趋势图</span>
+              <div class="legend">
+                <div class="legend-item">
+                  <span class="dot viewer-dot"></span>
+                  <span>观看人数</span>
+                </div>
+                <div class="legend-item">
+                  <span class="dot complete-dot"></span>
+                  <span>完播人数</span>
+                </div>
+              </div>
+              <el-button size="small" plain class="view-more">平台每日统计 <i class="el-icon-arrow-right"></i></el-button>
+            </div>
+            <div ref="viewerChart" class="chart-container"></div>
+          </el-card>
+        </el-col>
+
+        <el-col :span="12">
+          <el-card shadow="never">
+            <div slot="header" class="chart-header">
+              <span>经销商会员观看TOP10</span>
+              <div class="legend">
+                <el-radio-group v-model="viewerType" size="small" @change="handleDealerChartData">
+                  <el-radio-button label="0">按观看人数</el-radio-button>
+                  <el-radio-button label="1">按完播人数</el-radio-button>
+                </el-radio-group>
+              </div>
+              <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>
+            </div>
+            <div ref="dealerChart" class="chart-container"></div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </transition>
+    <transition name="fade">
+    <el-row :gutter="20" class="charts-section" v-show="selectedDiv===1">
+    <el-card shadow="never">
+      <div slot="header" class="chart-header">
+        <span>课程观看TOP10</span>
+        <div class="legend">
+          <el-radio-group v-model="viewerType" size="small" @change="handleCourseWatchChart">
+            <el-radio-button label="0">按观看人数</el-radio-button>
+            <el-radio-button label="1">按完播人数</el-radio-button>
+            <el-radio-button label="2">按答题人数</el-radio-button>
+            <el-radio-button label="3">按正确人数</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <el-radio-group v-model="delerSort" @change="handleCourseWatchChart">
+            <el-radio label="DESC">前10名</el-radio>
+            <el-radio label="ASC">倒数10名</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <div class="legend-item">
+            <span class="dot viewer-dot"></span>
+            <span>观看人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot complete-dot"></span>
+            <span>完播人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #E6A23C"></span>
+            <span>答题人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #F56C6C"></span>
+            <span>正确人数</span>
+          </div>
+        </div>
+        <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>
+      </div>
+      <div ref="courseWatchChart" class="chart-container"></div>
+    </el-card>
+    </el-row>
+    </transition>
+
+    <transition name="fade">
+    <el-row :gutter="20" class="charts-section" v-show="selectedDiv===2">
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>答题红包金额TOP10</span>
+            <div class="legend">
+              <el-radio-group v-model="dataType" size="small" @change="handleAnswerRedPackViewerChart">
+                <el-radio-button label="0">按经销商排行</el-radio-button>
+                <el-radio-button label="1">按课程排行</el-radio-button>
+              </el-radio-group>
+            </div>
+            <el-button size="small" plain class="view-more">红包记录 <i class="el-icon-arrow-right"></i></el-button>
+          </div>
+          <div ref="answerRedPackViewerChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <div slot="header" class="chart-header">
+            <span>答题红包金额趋势图</span>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="dot viewer-dot"></span>
+                <span>答题红包金额</span>
+              </div>
+          </div>
+            <el-button size="small" plain class="view-more">红包记录 <i class="el-icon-arrow-right"></i></el-button>
+          </div>
+          <div ref="answerRedPackMoneyViewerChart" class="chart-container"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+    </transition>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import CountTo from "vue-count-to";
+import {
+  analysisPreview,
+  authorizationInfo,
+  dealerAggregated, deaMemberTopTen, rechargeComsumption, rewardMoneyTopTen, rewardMoneyTrend,
+  smsBalance, thisMonthOrderCount, thisMonthRecvCount, trafficLog,
+  watchCourseTopTen, watchEndPlayTrend
+} from "@/api/statistics/statistics";
+import dayjs from 'dayjs';
+
+
+const viewCharOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+
+const thisMonthOrderCountOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '订单数',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '订单金额',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+
+const thisMonthRecvCountOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '收款数',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '收款金额',
+      type: 'line',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    }
+  ]
+}
+const dealerOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value'
+  },
+  yAxis: {
+    type: 'category',
+    data: []
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    }
+  ]
+}
+
+const courseWatchOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '8%',
+    top: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      interval: 0,
+      rotate: 30,
+      fontSize: 10,
+      width: 100,
+      overflow: 'truncate'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    },
+    {
+      name: '答题人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#E6A23C'
+      }
+    },
+    {
+      name: '正确人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#F56C6C'
+      }
+    }
+  ]
+}
+
+const lineChartOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross' // 改为 'cross' 更适合折线图
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '8%', // 如果x轴标签旋转，可能需要更大的 bottom
+    top: '5%',    // 增加一点顶部空间给可能的 Y 轴名称
+    containLabel: true
+  },
+  xAxis: {
+    type: 'time', // X轴类型改为 'time'
+    // data: [], // 时间轴不需要单独设置 data，数据在 series 中提供
+    axisLabel: {
+      // interval: 0, // 时间轴通常自动处理间隔，可以先移除或注释掉
+      rotate: 30,   // 保留旋转，如果标签可能重叠
+      fontSize: 10,
+      // width: 100, // width 和 overflow 对于时间轴可能行为不同，按需调整
+      // overflow: 'truncate',
+      formatter: null // ECharts 会自动格式化时间，如需特定格式可用 function 或字符串模板
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '金额 (元)', // 添加 Y 轴名称
+    nameLocation: 'end', // 名称位置
+    nameTextStyle: {
+      align: 'right',
+      padding: [0, 10, 0, 0] // 调整名称与轴线的距离
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    },
+    axisLabel: {
+      formatter: '{value} 元' // 可选：给 Y 轴刻度添加单位
+    }
+  },
+  series: [
+    {
+      name: '答题红包金额',
+      type: 'line', // 系列类型改为 'line'
+      data: [
+      ],
+      itemStyle: { // 控制数据点（标记）的样式
+        color: '#409EFF'
+      },
+      lineStyle: { // 控制线的样式
+        color: '#409EFF'
+      },
+      smooth: false, // 是否平滑曲线，可设为 true
+      symbol: 'circle', // 数据点标记形状，'emptyCircle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+      symbolSize: 4   // 数据点标记大小
+    }
+  ]
+};
+
+
+const redPackageOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '8%',
+    top: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      interval: 0,
+      rotate: 30,
+      fontSize: 10,
+      width: 100,
+      overflow: 'truncate'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '答题红包金额',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    }
+  ]
+}
+export default {
+  name: 'StatisticsDashboard',
+  components: {CountTo},
+  data() {
+    return {
+      percentage: 0,
+      // 预测message
+      remainMessage: '',
+      // 当天使用流量
+      todayTraffic: 0,
+      // 当月使用流量
+      thisMonthTraffic: 0,
+      dataType: '0',
+      delerSort: 'DESC',
+      smsRemainCount: 0,
+      viewerType: '0',
+      viewerChart: null,
+      userTypeText: '个微',
+      userType: 1,
+      dealerChart: null,
+      // 分公司数量
+      dealderCount: 0,
+      // 销售数量
+      groupMgrCount: 0,
+      // 会员总数量
+      memberCount: 0,
+      // 企微数量
+      qwMemberNum: 0,
+      // 正常会员数量
+      normalNum: 0,
+      // 黑名单会员数量
+      blackNum: 0,
+      // 观看人数
+      watchUserCount: 0,
+      // 完播人数
+      completedUserCount: 0,
+      // 完播率
+      completedRate: 0,
+      // 观看次数
+      watchCount:0,
+      // 完播次数
+      completedCount: 0,
+      // 视频完播率
+      watchRate: 0,
+      // 答题人数
+      answerMemberCount: 0,
+      // 正确人数
+      correctUserCount: 0,
+      correctRate: 0.0,
+      // 答题红包个数
+      rewardCount: 0,
+      // 答题红包金额
+      rewardMoney: 0.0,
+      queryTime: '今日',
+      todayWatchUserCount: 0,
+      versionLimit: 0,
+      /// 选中的分析概览
+      selectedDiv: 0,
+      filterType: 0,
+      answerRedPackViewerChart: null,
+      answerRedPackMoneyViewerChart: null,
+      todayComsumption: 0,
+      yesterdayComsumption: 0,
+      balance: 0,
+      autoRefreshInterval: null,
+      // 今日新增用户数
+      todayIncreaseUserNum: 0,
+      // 订单总数
+      orderTotalNum: 0,
+      // 今日新增订单数
+      todayOrderNum: 0,
+      // 收款总数
+      recvTotalNum: 0,
+      // 今日收款总数
+      recvTodayNum: 0,
+      // 商品总数
+      goodsTotalNum: 0,
+      // 今日商品总数
+      todayGoodsNum: 0
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initViewerChart()
+      this.initDealerChart()
+      this.initCourseWatchChart();
+      this.initAnswerRedPackViewerChart();
+      this.initAnswerRedPackMoneyViewerChart();
+      this.initThisMonthOrderChart();
+      this.initThisMonthRecvChart()
+
+      // 监听窗口大小变化，重新渲染图表
+      window.addEventListener('resize', () => {
+        this.viewerChart && this.viewerChart.resize()
+        this.dealerChart && this.dealerChart.resize()
+      })
+    })
+  },
+  created() {
+    this.refresh();
+  },
+  methods: {
+    handleUserType(){
+      if(this.userTypeText === '个微'){
+        this.userType = 1
+      }else{
+        this.userType = 2
+      }
+
+      this.refresh()
+    },
+    /**
+     * 计算余额预计可持续的天数
+     * @param {number} balance - 当前账户余额
+     * @param {number} todayConsumption - 今日消耗金额
+     * @param {number} yesterdayConsumption - 昨日消耗金额
+     * @return {Object} 包含天数和进度百分比的对象
+     */
+    calculateRemainingDays(balance, todayConsumption, yesterdayConsumption) {
+      // 如果今日和昨日消耗都为0，则无法预测（避免除以0）
+      if (todayConsumption === 0 && yesterdayConsumption === 0) {
+        return {
+          days: Infinity,
+          percentage: 0,
+          message: '暂无消耗数据'
+        };
+      }
+
+      // 计算每日平均消耗量
+      const avgDailyConsumption = (todayConsumption + yesterdayConsumption) / 2;
+
+      // 如果平均消耗为0，则无法预测
+      if (avgDailyConsumption === 0) {
+        return {
+          days: Infinity,
+          percentage: 0,
+          message: '暂无消耗数据'
+        };
+      }
+
+      // 计算剩余天数（向下取整）
+      const remainingDays = Math.floor(balance / avgDailyConsumption);
+
+      // 计算进度条百分比，最大为100
+      // 这里假设100天是满值，可以根据需要调整
+      const maxDays = 100;
+      const percentage = Math.min(100, Math.max(0, Math.round((remainingDays / maxDays) * 100)));
+
+      let message = '';
+      if (remainingDays > 365) {
+        message = '预测余额充足';
+      } else {
+        message = `预测不足${remainingDays}天`;
+      }
+
+      return {
+        days: remainingDays,
+        percentage: 100 - percentage,
+        message: message
+      };
+    },
+    /**
+     * 将字节数转换为合适的单位表示（Byte、KB、MB、GB、TB）
+     * @param {number} bytes - 字节数
+     * @param {number} [decimals=2] - 小数点后保留的位数
+     * @returns {string} 格式化后的字符串，包含数值和单位
+     */
+    formatBytes(bytes, decimals = 2) {
+      if (bytes === 0) return '0 Byte';
+
+      const k = 1024;
+      const sizes = ['Byte', 'KB', 'MB', 'GB', 'TB'];
+
+      // 计算合适的单位级别
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      // 转换为对应单位的值
+      const value = bytes / Math.pow(k, i);
+
+      // 格式化为指定小数位的字符串
+      return parseFloat(value.toFixed(decimals)) + ' ' + sizes[Math.min(i, sizes.length - 1)];
+    },
+    // 手动刷新
+    manualRefresh() {
+      this.refresh();
+    },
+    // 处理自动刷新选项
+    handleAutoRefresh(command) {
+      // 清除之前的定时器
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+
+      // 设置新的刷新间隔
+      this.autoRefreshInterval = parseInt(command);
+
+      // 如果间隔大于0，设置新的定时器
+      if (this.autoRefreshInterval > 0) {
+        this.timer = setInterval(() => {
+          this.refresh();
+        }, this.autoRefreshInterval * 60 * 1000); // 转换为毫秒
+
+        this.$message.success(`已设置${this.autoRefreshInterval}分钟自动刷新`);
+      } else {
+        this.$message.info('已关闭自动刷新');
+      }
+    },
+    refresh() {
+      rechargeComsumption().then(res=>{
+        if(res.code === 200){
+          this.balance = res.data.balance;
+          this.todayComsumption = res.data.todayComsumption;
+          this.yesterdayComsumption = res.data.yesterdayComsumption;
+          let calculateRemainingDays1 = this.calculateRemainingDays(this.balance,this.todayComsumption,this.yesterdayComsumption);
+          this.percentage = calculateRemainingDays1.percentage;
+          this.remainMessage = calculateRemainingDays1.message;
+        }
+      });
+
+      trafficLog().then(res=>{
+        if(res.code === 200) {
+          this.todayTraffic = res.data.today;
+          this.thisMonthTraffic = res.data.thisMonth;
+        }
+      })
+
+      dealerAggregated().then(res=>{
+        if(res.code === 200){
+          this.dealderCount = res.data.dealderCount??0;
+          this.groupMgrCount = res.data.groupMgrCount??0;
+          this.memberCount = res.data.memberCount??0;
+          this.qwMemberNum = res.data.qwMemberNum??0;
+          this.normalNum = res.data.normalNum??0;
+          this.blackNum = res.data.blackNum??0;
+          this.todayIncreaseUserNum = res.data.todayIncreaseUserNum??0;
+          this.orderTotalNum = res.data.orderTotalNum??0;
+          this.todayOrderNum = res.data.todayOrderNum??0;
+          this.recvTotalNum = res.data.recvTotalNum??0;
+          this.recvTodayNum = res.data.recvTodayNum??0;
+          this.goodsTotalNum = res.data.goodsTotalNum??0;
+          this.todayGoodsNum = res.data.todayGoodsNum??0;
+        }
+      })
+      let param = this.getParam();
+
+      // 获取当前日期时间
+      const today = dayjs();
+      param.startTime = this.formatDate(today);
+      param.endTime = this.formatDate(today);
+      analysisPreview(param).then(res=>{
+        if(res.code === 200){
+          this.watchUserCount = res.data.watchUserCount;
+          this.completedUserCount = res.data.completedUserCount;
+          this.completedRate = res.data.completedRate;
+          this.watchCount = res.data.watchCount;
+          this.completedCount = res.data.completedCount;
+          this.answerMemberCount = res.data.answerMemberCount;
+          this.correctUserCount = res.data.correctUserCount;
+          this.correctRate = res.data.correctRate;
+          this.rewardCount = res.data.rewardCount;
+          this.rewardMoney = res.data.rewardMoney;
+          this.watchRate = res.data.watchRate;
+        }
+      })
+      smsBalance().then(res=>{
+        if(res.code === 200){
+          if(res.data == null) {
+            this.smsRemainCount = 0;
+          } else {
+            this.smsRemainCount = res.data;
+          }
+        }
+      })
+      authorizationInfo().then(res=>{
+        if(res.code === 200){
+          this.todayWatchUserCount = res.data.todayWatchUserCount;
+          this.versionLimit = res.data.versionLimit;
+        }
+      })
+
+      this.handleCourseWatchChart()
+      this.handleViewChartData()
+
+      // 经销商会员观看TOP10
+      this.handleDealerChartData()
+
+      this.handleAnswerRedPackViewerChart()
+
+      this.handleAnswerRedPackMoneyViewerChart()
+
+      this.handleThisMonthRecvCount();
+      this.handleThisMonthOrderCount();
+
+    },
+    /**
+     * 将数字添加千位分隔符
+     * @param {number|string} num - 需要格式化的数字
+     * @return {string} 添加千位分隔符后的字符串
+     */
+     formatNumberWithCommas(num) {
+      if (num === null || num === undefined || isNaN(Number(num))) {
+        return '0';
+      }
+
+      const numStr = String(num);
+
+      // 处理负数
+      const isNegative = numStr.startsWith('-');
+      const absNumStr = isNegative ? numStr.slice(1) : numStr;
+
+      // 分离整数部分和小数部分
+      const parts = absNumStr.split('.');
+      const integerPart = parts[0];
+      const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
+
+      const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+      return (isNegative ? '-' : '') + formattedInteger + decimalPart;
+    },
+    handleToggleDiv(selected){
+      this.selectedDiv = selected;
+
+      if (selected === 1) {
+        this.$nextTick(() => {
+          if (this.courseWatchChart) {
+            this.courseWatchChart.resize();
+          } else {
+          }
+        });
+      }
+      else if (selected === 0) {
+        this.$nextTick(() => {
+          if (this.viewerChart) this.viewerChart.resize();
+          if (this.dealerChart) this.dealerChart.resize();
+        });
+      } else if (selected === 2) {
+        this.$nextTick(() => {
+          if (this.answerRedPackViewerChart) this.answerRedPackViewerChart.resize();
+          if (this.answerRedPackMoneyViewerChart) this.answerRedPackMoneyViewerChart.resize();
+        });
+      }
+      if(this.selectedDiv === 0){
+        this.handleViewChartData()
+        this.handleDealerChartData()
+      } else if(this.selectedDiv === 1) {
+        this.handleCourseWatchChart()
+      } else if(this.selectedDiv === 2) {
+        this.handleAnswerRedPackViewerChart()
+        this.handleAnswerRedPackMoneyViewerChart()
+      }
+    },
+    formatDate(date) {
+      return dayjs(date).format('YYYY-MM-DD');
+    },
+
+    getParam(){
+      let param = {
+        startTime: '',
+        endTime: '',
+        userType: this.userType
+      };
+      // 获取当前日期时间
+      const today = dayjs();
+
+      let type = 0;
+      if (this.queryTime === '今日') {
+        param.startTime = this.formatDate(today);
+        param.endTime = this.formatDate(today);
+        type = 0;
+      } else if (this.queryTime === '昨日') {
+        const yesterday = today.subtract(1, 'day');
+        param.startTime = this.formatDate(yesterday);
+        param.endTime = this.formatDate(yesterday);
+        type = 1;
+      } else if (this.queryTime === '本周') {
+        param.startTime = this.formatDate(today.startOf('week'));
+        param.endTime = this.formatDate(today.endOf('week'));
+        type = 2;
+      } else if (this.queryTime === '本月') {
+        param.startTime = this.formatDate(today.startOf('month'));
+        param.endTime = this.formatDate(today.endOf('month'));
+        type = 3;
+      } else if (this.queryTime === '上月') {
+        const lastMonth = today.subtract(1, 'month');
+        param.startTime = this.formatDate(lastMonth.startOf('month'));
+        param.endTime = this.formatDate(lastMonth.endOf('month'));
+        type = 4;
+      } else {
+        console.warn(`未知的 queryTime: ${this.queryTime}, 默认使用今日`);
+        param.startTime = this.formatDate(today);
+        param.endTime = this.formatDate(today);
+      }
+      param.type = type;
+      param.sort = this.delerSort;
+      return param;
+    },
+    // 分析概览
+    handleAnalysis(e){
+
+      let param = this.getParam();
+      analysisPreview(param).then(res=>{
+        if(res.code === 200){
+          this.watchUserCount = res.data.watchUserCount;
+          this.completedUserCount = res.data.completedUserCount;
+          this.completedRate = res.data.completedRate;
+          this.watchCount = res.data.watchCount;
+          this.completedCount = res.data.completedCount;
+          this.answerMemberCount = res.data.answerMemberCount;
+          this.correctUserCount = res.data.correctUserCount;
+          this.correctRate = res.data.correctRate;
+          this.rewardCount = res.data.rewardCount;
+          this.rewardMoney = res.data.rewardMoney;
+          this.watchRate = res.data.watchRate;
+        }
+      })
+
+      if(this.selectedDiv === 0){
+        this.handleViewChartData()
+        this.handleDealerChartData()
+      } else if(this.selectedDiv === 1) {
+        this.handleCourseWatchChart()
+      } else if(this.selectedDiv === 2) {
+        this.handleAnswerRedPackViewerChart()
+        this.handleAnswerRedPackMoneyViewerChart()
+      }
+    },
+    handleAnswerRedPackViewerChart(){
+      let param = this.getParam();
+      param = {...param,statisticalType:this.viewerType,dataType: this.dataType};
+      rewardMoneyTopTen(param).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let companyNameList = data.map(e=>e.companyName)
+          let courseNameList = data.map(e=>e.courseName)
+          let rewardMoneyList = data.map(e=>e.rewardMoney)
+          if(this.dataType === '0'){
+            redPackageOption.xAxis.data = companyNameList;
+          }else{
+            redPackageOption.xAxis.data = courseNameList;
+          }
+          redPackageOption.series[0].data = rewardMoneyList;
+
+          this.answerRedPackViewerChart.setOption(redPackageOption)
+        }
+      })
+    },
+    handleAnswerRedPackMoneyViewerChart(){
+      let param = this.getParam();
+      param = {...param,statisticalType:this.viewerType,dataType: this.dataType};
+      rewardMoneyTrend(param).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let option = data.map(e=>[e.x,e.rewardMoney])
+          lineChartOption.series[0].data = option;
+
+          this.answerRedPackMoneyViewerChart.setOption(lineChartOption)
+        }
+      })
+    },
+    handleCourseWatchChart() {
+      let param = this.getParam();
+      param = {...param,statisticalType:this.viewerType};
+      watchCourseTopTen(param).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let watchUserCountList = data.map(e=>e.watchUserCount);
+          let completedUserCountList = data.map(e=>e.completedUserCount);
+          let answerUserCountList = data.map(e=>e.answerUserCount);
+          let correctUserCountList = data.map(e=>e.correctUserCount);
+          let courseNameList = data.map(e=>e.courseName);
+          courseWatchOption.xAxis.data = courseNameList;
+          courseWatchOption.series[0].data = watchUserCountList;
+          courseWatchOption.series[1].data = completedUserCountList;
+          courseWatchOption.series[2].data = answerUserCountList;
+          courseWatchOption.series[3].data = correctUserCountList;
+          this.courseWatchChart.setOption(courseWatchOption)
+        }
+      })
+    },
+    handleDealerChartData(){
+      let param = this.getParam();
+
+      // 经销商会员观看TOP10
+      deaMemberTopTen({...param,statisticalType: this.viewerType}).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let companyNameList = data.map(e=>e.companyName);
+          let watchUserList = data.map(e=>e.watchUserCount);
+          dealerOption.yAxis.data = companyNameList;
+          dealerOption.series[0].data = watchUserList;
+
+          this.dealerChart.setOption(dealerOption)
+        }
+      })
+
+    },
+    handleThisMonthOrderCount(){
+      thisMonthOrderCount().then(res=>{
+        if(res.code === 200){
+          let dates = res.dates;
+          let orderCount = res.orderCount;
+          let payPrice = res.payPrice;
+
+          thisMonthOrderCountOption.series[0].data = orderCount;
+          thisMonthOrderCountOption.series[1].data = payPrice;
+          thisMonthOrderCountOption.xAxis.data = dates;
+
+          this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
+        }
+      })
+    },
+    handleThisMonthRecvCount(){
+      thisMonthRecvCount().then(res=>{
+        if(res.code === 200){
+          let dates = res.dates;
+          let orderCount = res.orderCount;
+          let payMoney = res.payMoney;
+
+          thisMonthRecvCountOption.series[0].data = orderCount;
+          thisMonthRecvCountOption.series[1].data = payMoney;
+          thisMonthRecvCountOption.xAxis.data = dates;
+          this.thisMonthRecvChart.setOption(thisMonthRecvCountOption)
+        }
+      })
+    },
+    handleViewChartData(){
+      let param = this.getParam();
+
+      watchEndPlayTrend({...param}).then(res=>{
+        if(res.code === 200){
+          let data = res.data;
+          let watchUserCountList = data.map(e=>e.watchUserCount);
+          let completedUserCountList = data.map(e=>e.completedUserCount);
+          let xAxis = data.map(e=>e.x);
+          viewCharOption.series[0].data = watchUserCountList;
+          viewCharOption.series[1].data = completedUserCountList;
+          viewCharOption.xAxis.data = xAxis;
+
+          this.viewerChart.setOption(viewCharOption);
+        }
+      })
+
+    },
+    initThisMonthOrderChart(){
+      this.thisMonthOrderChart = echarts.init(this.$refs.viewerOrderChart)
+      this.thisMonthOrderChart.setOption(thisMonthOrderCountOption)
+    },
+    initThisMonthRecvChart(){
+      this.thisMonthRecvChart = echarts.init(this.$refs.viewerReceiveChart)
+      this.thisMonthRecvChart.setOption(thisMonthOrderCountOption)
+    },
+    initViewerChart() {
+      this.viewerChart = echarts.init(this.$refs.viewerChart)
+      this.viewerChart.setOption(viewCharOption)
+    },
+    initDealerChart() {
+      this.dealerChart = echarts.init(this.$refs.dealerChart)
+
+      this.dealerChart.setOption(dealerOption)
+    },
+    initCourseWatchChart() {
+      this.courseWatchChart = echarts.init(this.$refs.courseWatchChart)
+
+      this.courseWatchChart.setOption(courseWatchOption)
+    },
+    initAnswerRedPackViewerChart(){
+      this.answerRedPackViewerChart = echarts.init(this.$refs.answerRedPackViewerChart)
+
+      this.answerRedPackViewerChart.setOption(redPackageOption)
+    },
+    initAnswerRedPackMoneyViewerChart(){
+      this.answerRedPackMoneyViewerChart = echarts.init(this.$refs.answerRedPackMoneyViewerChart)
+
+      this.answerRedPackMoneyViewerChart.setOption(lineChartOption)
+    }
+  },
+
+  beforeDestroy() {
+    // 组件销毁时清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    // window.removeEventListener('resize', this.resizeHandler)
+    this.viewerChart && this.viewerChart.dispose()
+    this.dealerChart && this.dealerChart.dispose()
+  }
+}
+</script>
+
+<style scoped>
+.highlight-today-add{
+  color:green;font-size:17px;font-weight: normal;
+}
+.action-group .el-button + .el-button,
+.action-group .el-dropdown {
+  margin-left: 10px;
+}
+.is-active {
+  color: #409EFF;
+  font-weight: bold;
+}
+::v-deep .el-radio-button__inner:hover {
+  color: #409EFF; /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
+}
+::v-deep .el-radio-button.is-active .el-radio-button__inner {
+  background-color: #409EFF; /* 选中时的背景色 */
+  border-color: #409EFF;     /* 选中时的边框色 */
+  color: #FFFFFF;           /* 选中时的文字颜色 (通常是白色) */
+  box-shadow: -1px 0 0 0 #409EFF; /* 处理按钮间的连接缝隙 */
+}
+/* 如果需要，也可以修改非选中状态下的聚焦（focus）或悬浮（hover）样式 */
+/* 例如，让非选中按钮悬浮时边框和文字也变蓝 */
+::v-deep .el-radio-button:not(.is-active) .el-radio-button__inner:hover {
+  color: #409EFF;
+  /* border-color: #b3d8ff;  Element UI 默认悬浮边框色，可以按需修改 */
+}
+/* 聚焦时的外框，如果需要的话 */
+::v-deep .el-radio-button:focus:not(.is-checked) .el-radio-button__inner {
+  /* border-color: #409EFF; */ /* Element UI 默认的 focus 颜色通常关联主题色 */
+  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */ /* 示例 focus 光晕 */
+}
+.statistics-dashboard {
+  padding: 20px;
+  background-color: #f5f7fa;
+}
+
+.overview-section,
+.analysis-section {
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.data-card {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 15px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
+}
+.data-card:hover{
+  border: 1px solid #4592ff;
+  background-color: #e7f1ff;
+}
+
+.card-title {
+  color: #606266;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: auto;
+}
+
+.highlight {
+  color: #409EFF;
+}
+
+.card-sub {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.card-desc {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.card-badge {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: #f0f9eb;
+  color: #67c23a;
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+
+.cdn-label {
+  background-color: #409EFF;
+  color: white;
+  padding: 2px 5px;
+  border-radius: 4px;
+  margin-right: 5px;
+  font-size: 12px;
+}
+
+.tab-group {
+  display: flex;
+  gap: 10px;
+}
+
+.action-group {
+  display: flex;
+  gap: 10px;
+}
+
+.analysis-card {
+  border-radius: 4px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.card-icon {
+  width: 50px;
+  height: 50px;
+  background-color: rgba(64, 158, 255, 0.1);
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  color: #409EFF;
+  margin-right: 20px;
+}
+
+.card-content {
+  display: flex;
+}
+
+.card-row {
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+  flex-direction: column;
+  padding: 10px;
+  .highlight{
+    text-align: center;
+    margin-top: 1em;
+
+    font-family: BebasNeue;
+    color: #1677ff;
+    font-size: 26px;
+    line-height: 42px;
+    font-weight: 400;
+    margin-top: 8px;
+  }
+  font-size: 15px;
+  color: #000;
+
+}
+
+.charts-section {
+  margin-top: 20px;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.view-more {
+  font-size: 12px;
+}
+
+.legend {
+  display: flex;
+  gap: 15px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 5px;
+}
+
+.viewer-dot {
+  background-color: #409EFF;
+}
+
+.complete-dot {
+  background-color: #67C23A;
+}
+
+.chart-container {
+  height: 350px;
+  width: 100%;
+}
+.analysis-card-check{
+  display: flex;
+  flex-direction: row;
+  border: 1px solid transparent;
+  background-color: #fff;
+  border-radius: 4px;
+}
+.analysis-card-check:hover{
+  cursor: pointer;
+}
+.analysis-card-check-selected:after{
+  content: "";
+  display: block;
+  border-width: 15px;
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  margin-left: -32px;
+  border-style: solid dashed dashed solid;
+  border-color: #4592FF transparent transparent transparent;
+  font-size: 0;
+  line-height: 0;
+  z-index:1;
+}
+.analysis-card-check-selected:before{
+  content: "";
+  display: block;
+  border-width: 15px;
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  margin-left: -32px;
+  border-style: solid dashed dashed solid;
+  border-color: #4592FF transparent transparent transparent;
+  font-size: 0;
+  line-height: 0;
+  z-index:1;
+}
+.analysis-card-check-selected{
+  border: 1px solid #4592FF;
+  background-color: #e7f1ff;
+}
+.color{
+  position: relative;
+  border: 1px solid #4592FF;
+  background-color: #e7f1ff;
+}
+.color:after {
+  bottom: -27px;
+  border-color: #E7F1FF transparent transparent transparent;
+}
+.legend-group{
+
+}
+</style>

src/views/statistics/section/channel.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公司名" prop="companyId">
+        <select-tree
+          v-model="selectedCompanyList"
+          :raw-data="deptList"
+          placeholder="请选择销售"
+          :parentSelectable="true"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          @change="handleMultiChange"
+        ></select-tree>
+      </el-form-item>
+      <el-form-item label="销售" prop="nickName" v-if="queryParams.companyId">
+        <el-select v-model="queryParams.companyUserId" remote
+                   placeholder="请选择"
+                   filterable clearable
+                   style="width: 100%;"
+                   @keyup.enter.native="handleQuery"
+                   @change="handleCompanyUserId"
+        >
+          <el-option
+            v-for="dict in companyUserList"
+            :key="`${dict.nickName} - ${dict.userName}`"
+            :label="`${dict.nickName} - ${dict.userName}`"
+            :value="dict.userId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="SOP任务" prop="channel" label-width="70px">
+        <date-range
+          v-model="selectedMultipleTasks"
+          :raw-data="channelList"
+          placeholder="请选择多个任务"
+          :parentSelectable="true"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          :show-node-detail="true"
+          @change="handleMultiChange"
+          @dateRangeChange="dateRangeChange"
+        ></date-range>
+      </el-form-item>
+      <el-form-item label="包含未发课" label-width="120px">
+        <el-checkbox v-model="queryParams.includeSend0">
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:stats:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 警告提示 -->
+    <el-alert
+      title="待激活人数依赖进粉时的自动标记和员工手动标记是可变的，相应的目标人数和进线完播率受此影响；为了不受进粉期人数变化影响，第二天新进报名产生的观后数据不做统计；辅助工作台人数不一致可能是受进粉影响，也有可能是员工删除了好友或者取消了客户频道报名。"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="mb8">
+    </el-alert>
+
+    <el-table border v-loading="loading" :data="statsList" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries">
+      <!-- 未上线部分 -->
+      <el-table-column prop="periodName" label="sop营期" width="180" align="center"/>
+<!--      <el-table-column prop="deptName" label="所属部门" width="180" align="center"/>-->
+<!--      <el-table-column prop="companyUserName" label="员工"  />-->
+      <el-table-column prop="sopTaskName" label="sop任务名"  />
+      <el-table-column prop="trainCampNum" label="营期人数"  align="center" />
+      <el-table-column prop="sendNum" label="发课数"  align="center" />
+      <el-table-column prop="notRegisteredNum" label="待看课"  align="center" />
+      <el-table-column prop="registeredNum" label="上线数"  align="center" />
+      <el-table-column prop="interruptNum" label="看课中断"  align="center" />
+      <el-table-column prop="completedNum" label="已完课"  align="center" />
+      <el-table-column prop="qwRepeatNum" label="企微重粉"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.qwRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userRepeatNum" label="看课重粉(小程序)"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.userRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="regRate" label="上线率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.regRate === 'number'">
+            {{ (scope.row.regRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="finishedRate" label="完课率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.finishedRate === 'number'">
+            {{ (scope.row.finishedRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+      <!--        汇总-->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  listEmployeeStats,
+  getEmployeeList,
+  getChannelList,
+  exportEmployeeStats,
+  getSOPTaskData,
+  listPeriodList,
+  getDeptData, exportSellerData, exportPeriodData
+} from '@/api/system/employeeStats'
+import {getCompanyList} from "@/api/company/company";
+import {getUserList} from "@/api/company/companyUser";
+import SelectTree from "@/components/TreeSelect/index.vue";
+import dateRange from '@/components/TreeSelect/dateRange.vue'
+
+export default {
+  name: "EmployeeStats",
+  components: {SelectTree,dateRange},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      companys:[],
+      selectedMultipleTasks: [],
+      selectedCompanyList: [],
+      deptList: [],
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 员工统计表格数据
+      statsList: [],
+      // 员工列表
+      employeeList: [],
+      companyUserList: [],
+      // 频道列表
+      channelList: [],
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        channel: null,
+        startDate: null,
+        endDate: null,
+        companyId: null,
+        periodList: [],
+        // 包含未发课数
+        includeSend0: false
+      },
+      // 总体统计
+      totalStats: {
+        totalEmployees: 0,
+        onlineEmployees: 0,
+        offlineEmployees: 0,
+        completionRate: '0.00'
+      }
+    };
+  },
+  created() {
+    this.getList();
+
+    // getCompanyList().then(response => {
+    //   this.companys = response.data;
+    // });
+
+    getSOPTaskData({}).then(response => {
+      this.channelList = response.data;
+    });
+    getDeptData().then(response => {
+      this.deptList = response.data;
+    })
+  },
+  methods: {
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+
+        const values = data.map(item => Number(item[column.property]));
+
+        if (['trainCampNum', 'sendNum', 'notRegisteredNum', 'registeredNum', 'interruptNum', 'completedNum', 'qwRepeatNum', 'userRepeatNum'].includes(column.property)) {
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        }
+        else if (column.property === 'regRate') {
+          const totalRegistered = data.reduce((sum, item) => sum + (Number(item.registeredNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalRegistered / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else if (column.property === 'finishedRate') {
+          const totalCompleted = data.reduce((sum, item) => sum + (Number(item.completedNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalCompleted / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+    handleCompanyUserId(val){
+      if(val == null || val === '') {
+        this.queryParams.companyUserId = null;
+        this.queryParams.userIds = [];
+      }
+    },
+    dateRangeChange(e){
+      getSOPTaskData({
+        startDate: e[0],
+        endDate: e[1]
+      }).then(response => {
+        this.channelList = response.data;
+      });
+    },
+    handleMultiChange(e){
+
+    },
+    handleSeller(){
+      if(this.queryParams.companyId != null) {
+        getUserList(this.queryParams.companyId).then(res=>{
+          if(res.code === 200) {
+            this.companyUserList = res.data
+          }
+        })
+      } else {
+        this.queryParams.companyUserId = null;
+      }
+    },
+    /** 查询员工统计列表 */
+    getList() {
+      this.loading = true;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      }else {
+        this.queryParams.userIds = [];
+      }
+
+      listPeriodList(this.queryParams).then(response => {
+        console.log(response)
+        this.statsList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 获取员工列表 */
+    getEmployeeList() {
+      listPeriodList().then(response => {
+        this.employeeList = response.data || [];
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      console.log(this.selectedCompanyList == null || this.selectedCompanyList.length < 0)
+      if(this.selectedCompanyList == null || this.selectedCompanyList.length <= 0) {
+        this.$message.error("公司和时间为必选!");
+        return;
+      }
+      this.queryParams.pageNum = 1;
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.selectedMultipleTasks = [];
+      this.selectedCompanyList = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      }else {
+        this.queryParams.userIds = [];
+      }
+      const queryParams = this.queryParams;
+
+      this.$confirm('是否确认导出当前查询数据？', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return exportPeriodData(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.stats-card {
+  text-align: center;
+  margin-bottom: 16px;
+
+  .stats-number {
+    font-size: 24px;
+    font-weight: bold;
+    color: #409EFF;
+
+    &.online {
+      color: #67C23A;
+    }
+
+    &.offline {
+      color: #F56C6C;
+    }
+
+    &.rate {
+      color: #E6A23C;
+    }
+  }
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+::v-deep .el-table .el-table__header th {
+  background-color: #f5f7fa;
+}
+
+::v-deep .el-alert {
+  margin-bottom: 16px;
+}
+</style>

src/views/statistics/section/index.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公司" prop="companyId">
+        <select-tree
+          v-model="selectedCompanyList"
+          :raw-data="deptList"
+          :parentSelectable="true"
+          placeholder="请选择销售"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          @change="handleMultiChange"
+        ></select-tree>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="SOP任务" prop="channel" label-width="70px">
+        <date-range
+          v-model="selectedMultipleTasks"
+          :raw-data="channelList"
+          placeholder="请选择多个任务"
+          :parentSelectable="true"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          :show-node-detail="true"
+        @change="handleMultiChange"
+        @dateRangeChange="dateRangeChange"
+        ></date-range>
+      </el-form-item>
+      <el-form-item label="包含未发课" label-width="120px">
+        <el-checkbox v-model="queryParams.includeSend0">
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:stats:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 警告提示 -->
+    <el-alert
+      title="待激活人数依赖进粉时的自动标记和员工手动标记是可变的，相应的目标人数和进线完播率受此影响；为了不受进粉期人数变化影响，第二天新进报名产生的观后数据不做统计；辅助工作台人数不一致可能是受进粉影响，也有可能是员工删除了好友或者取消了客户频道报名。"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="mb8">
+    </el-alert>
+
+    <el-table border v-loading="loading" :data="statsList" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries">
+      <!-- 未上线部分 -->
+        <el-table-column prop="deptName" label="所属部门" width="180" align="center"/>
+        <el-table-column prop="companyUserName" label="员工"  />
+      <el-table-column prop="trainCampNum" label="营期人数"  align="center" />
+      <el-table-column prop="sendNum" label="发课数"  align="center" />
+      <el-table-column prop="notRegisteredNum" label="待看课"  align="center" />
+      <el-table-column prop="registeredNum" label="上线数"  align="center" />
+      <el-table-column prop="interruptNum" label="看课中断"  align="center" />
+      <el-table-column prop="completedNum" label="已完课"  align="center" />
+      <el-table-column prop="qwRepeatNum" label="企微重粉"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.qwRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userRepeatNum" label="看课重粉(小程序)"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.userRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="regRate" label="上线率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.regRate === 'number'">
+            {{ (scope.row.regRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="finishedRate" label="完课率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.finishedRate === 'number'">
+            {{ (scope.row.finishedRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  listEmployeeStats,
+  getEmployeeList,
+  getChannelList,
+  exportEmployeeStats,
+  getSOPTaskData,
+  getDeptData,
+  exportSellerData
+} from '@/api/system/employeeStats'
+import {getCompanyList} from "@/api/company/company";
+import {getUserList} from "@/api/company/companyUser";
+import SelectTree from "@/components/TreeSelect/index.vue";
+import dateRange from '@/components/TreeSelect/dateRange.vue'
+
+export default {
+  name: "EmployeeStats",
+  components: {SelectTree,dateRange},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      companys:[],
+      selectedMultipleTasks: [],
+      selectedCompanyList: [],
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 员工统计表格数据
+      statsList: [],
+      // 员工列表
+      employeeList: [],
+      companyUserList: [],
+      // 频道列表
+      channelList: [],
+      // 日期范围
+      dateRange: [],
+      deptList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        channel: null,
+        startDate: null,
+        endDate: null,
+        companyId: null,
+        periodList: [],
+        // 包含未发课数
+        includeSend0: false
+      },
+      // 总体统计
+      totalStats: {
+        totalEmployees: 0,
+        onlineEmployees: 0,
+        offlineEmployees: 0,
+        completionRate: '0.00'
+      }
+    };
+  },
+  created() {
+    this.getList();
+
+    // getCompanyList().then(response => {
+    //   this.companys = response.data;
+    // });
+
+    getSOPTaskData({}).then(response => {
+      this.channelList = response.data;
+    });
+
+    getDeptData().then(response => {
+      this.deptList = response.data;
+    })
+  },
+  methods: {
+    dateRangeChange(e){
+      getSOPTaskData({
+        startDate: e[0],
+        endDate: e[1]
+      }).then(response => {
+        this.channelList = response.data;
+      });
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+
+        const values = data.map(item => Number(item[column.property]));
+
+        if (['trainCampNum', 'sendNum', 'notRegisteredNum', 'registeredNum', 'interruptNum', 'completedNum', 'qwRepeatNum', 'userRepeatNum'].includes(column.property)) {
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        }
+        else if (column.property === 'regRate') {
+          const totalRegistered = data.reduce((sum, item) => sum + (Number(item.registeredNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalRegistered / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else if (column.property === 'finishedRate') {
+          const totalCompleted = data.reduce((sum, item) => sum + (Number(item.completedNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalCompleted / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+    handleCompanyUserId(val){
+      if(val == null || val === '') {
+        this.queryParams.companyUserId = null;
+        this.queryParams.userIds = [];
+      }
+    },
+    handleMultiChange(e){
+
+    },
+    handleSeller(){
+      if(this.queryParams.companyId != null) {
+        getUserList(this.queryParams.companyId).then(res=>{
+          if(res.code === 200) {
+            this.companyUserList = res.data
+          }
+        })
+      } else {
+        this.queryParams.companyUserId = null;
+      }
+    },
+    /** 查询员工统计列表 */
+    getList() {
+      this.loading = true;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      }else {
+        this.queryParams.userIds = [];
+      }
+
+      listEmployeeStats(this.queryParams).then(response => {
+        this.statsList = response.data.list;
+        this.total = response.data.total;
+
+      }).finally(()=>{
+        this.loading = false;
+      })
+    },
+    /** 获取员工列表 */
+    getEmployeeList() {
+      getEmployeeList().then(response => {
+        this.employeeList = response.data || [];
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if(this.selectedCompanyList == null || this.selectedCompanyList.length <= 0) {
+        this.$message.error("公司和时间为必选!");
+        return;
+      }
+      this.queryParams.pageNum = 1;
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.selectedMultipleTasks = [];
+      this.selectedCompanyList = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      }else {
+        this.queryParams.userIds = [];
+      }
+      const queryParams = this.queryParams;
+
+      this.$confirm('是否确认导出当前查询数据？', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return exportSellerData(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.stats-card {
+  text-align: center;
+  margin-bottom: 16px;
+
+  .stats-number {
+    font-size: 24px;
+    font-weight: bold;
+    color: #409EFF;
+
+    &.online {
+      color: #67C23A;
+    }
+
+    &.offline {
+      color: #F56C6C;
+    }
+
+    &.rate {
+      color: #E6A23C;
+    }
+  }
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+::v-deep .el-table .el-table__header th {
+  background-color: #f5f7fa;
+}
+
+::v-deep .el-alert {
+  margin-bottom: 16px;
+}
+</style>

src/views/statistics/section/today.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="公司名" prop="companyId">
+        <select-tree
+          v-model="selectedCompanyList"
+          :raw-data="deptList"
+          placeholder="请选择销售"
+          :parentSelectable="true"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          @change="handleMultiChange"
+        ></select-tree>
+      </el-form-item>
+      <el-form-item label="销售" prop="nickName" v-if="queryParams.companyId">
+        <el-select v-model="queryParams.companyUserId" remote
+                   placeholder="请选择"
+                   filterable clearable
+                   style="width: 100%;"
+                   @keyup.enter.native="handleQuery"
+                   @change="handleCompanyUserId"
+        >
+          <el-option
+            v-for="dict in companyUserList"
+            :key="`${dict.nickName} - ${dict.userName}`"
+            :label="`${dict.nickName} - ${dict.userName}`"
+            :value="dict.userId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间范围" prop="dateRange">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="SOP任务" prop="channel" label-width="70px">
+        <date-range
+          v-model="selectedMultipleTasks"
+          :raw-data="channelList"
+          placeholder="请选择多个任务"
+          :parentSelectable="true"
+          :multiple="true"
+          component-width="300px"
+          :max-display-tags="3"
+          :check-strictly="false"
+          :return-leaf-only="false"
+          :show-node-detail="true"
+          @change="handleMultiChange"
+          @dateRangeChange="dateRangeChange"
+        ></date-range>
+      </el-form-item>
+      <el-form-item label="包含未发课" label-width="120px">
+        <el-checkbox v-model="queryParams.includeSend0">
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:stats:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 警告提示 -->
+    <el-alert
+      title="待激活人数依赖进粉时的自动标记和员工手动标记是可变的，相应的目标人数和进线完播率受此影响；为了不受进粉期人数变化影响，第二天新进报名产生的观后数据不做统计；辅助工作台人数不一致可能是受进粉影响，也有可能是员工删除了好友或者取消了客户频道报名。"
+      type="warning"
+      :closable="false"
+      show-icon
+      class="mb8">
+    </el-alert>
+
+    <el-table border v-loading="loading" :data="statsList" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries">
+      <!-- 未上线部分 -->
+      <el-table-column prop="dataDate" label="日期" width="180" align="center"/>
+      <el-table-column prop="trainCampNum" label="营期人数"  align="center" />
+      <el-table-column prop="sendNum" label="发课数"  align="center" />
+      <el-table-column prop="notRegisteredNum" label="待看课"  align="center" />
+      <el-table-column prop="registeredNum" label="上线数"  align="center" />
+      <el-table-column prop="interruptNum" label="看课中断"  align="center" />
+      <el-table-column prop="completedNum" label="已完课"  align="center" />
+      <el-table-column prop="qwRepeatNum" label="企微重粉"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.qwRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userRepeatNum" label="看课重粉(小程序)"  align="center" >
+        <template slot-scope="scope">
+          <span>{{scope.row.userRepeatNum || 0}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="regRate" label="上线率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.regRate === 'number'">
+            {{ (scope.row.regRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="finishedRate" label="完课率" align="center">
+        <template slot-scope="scope">
+          <span v-if="typeof scope.row.finishedRate === 'number'">
+            {{ (scope.row.finishedRate * 100).toFixed(2) }}%
+          </span>
+          <span v-else>
+            0.00%
+          </span>
+        </template>
+      </el-table-column>
+      <!--        汇总-->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  listTodayList,
+  getEmployeeList,
+  getChannelList,
+  exportEmployeeStats,
+  getSOPTaskData,
+  getDeptData, exportSellerData, listPeriodList, exportTodayData
+} from '@/api/system/employeeStats'
+import {getCompanyList} from "@/api/company/company";
+import {getUserList} from "@/api/company/companyUser";
+import SelectTree from "@/components/TreeSelect/index.vue";
+import dateRange from '@/components/TreeSelect/dateRange.vue'
+
+export default {
+  name: "EmployeeStats",
+  components: {SelectTree,dateRange},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      companys:[],
+      selectedMultipleTasks: [],
+      selectedCompanyList: [],
+      deptList: [],
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 员工统计表格数据
+      statsList: [],
+      // 员工列表
+      employeeList: [],
+      companyUserList: [],
+      // 频道列表
+      channelList: [],
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        channel: null,
+        startDate: null,
+        endDate: null,
+        companyId: null,
+        periodList: [],
+        // 包含未发课数
+        includeSend0: false
+      },
+      // 总体统计
+      totalStats: {
+        totalEmployees: 0,
+        onlineEmployees: 0,
+        offlineEmployees: 0,
+        completionRate: '0.00'
+      }
+    };
+  },
+  created() {
+    this.getList();
+
+    // getCompanyList().then(response => {
+    //   this.companys = response.data;
+    // });
+
+    getSOPTaskData({}).then(response => {
+      this.channelList = response.data;
+    });
+
+    getDeptData().then(response => {
+      this.deptList = response.data;
+    })
+
+  },
+  methods: {
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+
+        const values = data.map(item => Number(item[column.property]));
+
+        if (['trainCampNum', 'sendNum', 'notRegisteredNum', 'registeredNum', 'interruptNum', 'completedNum', 'qwRepeatNum', 'userRepeatNum'].includes(column.property)) {
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          } else {
+            sums[index] = 'N/A';
+          }
+        }
+        else if (column.property === 'regRate') {
+          const totalRegistered = data.reduce((sum, item) => sum + (Number(item.registeredNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalRegistered / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else if (column.property === 'finishedRate') {
+          const totalCompleted = data.reduce((sum, item) => sum + (Number(item.completedNum) || 0), 0);
+          const totalSendNum = data.reduce((sum, item) => sum + (Number(item.sendNum) || 0), 0);
+
+          if (totalSendNum > 0) {
+            const rate = (totalCompleted / totalSendNum * 100).toFixed(2);
+            sums[index] = `${rate}%`;
+          } else {
+            sums[index] = '0.00%';
+          }
+        }
+        else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+    handleCompanyUserId(val){
+      if(val == null || val === '') {
+        this.queryParams.companyUserId = null;
+        this.queryParams.userIds = [];
+      }
+    },
+    handleMultiChange(e){
+
+    },
+    dateRangeChange(e){
+      getSOPTaskData({
+        startDate: e[0],
+        endDate: e[1]
+      }).then(response => {
+        this.channelList = response.data;
+      });
+    },
+    handleSeller(){
+      if(this.queryParams.companyId != null) {
+        getUserList(this.queryParams.companyId).then(res=>{
+          if(res.code === 200) {
+            this.companyUserList = res.data
+          }
+        })
+      } else {
+        this.queryParams.companyUserId = null;
+      }
+    },
+    /** 查询员工统计列表 */
+    getList() {
+      this.loading = true;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      } else {
+        this.queryParams.userIds = [];
+      }
+
+      listTodayList(this.queryParams).then(response => {
+        this.statsList = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 获取员工列表 */
+    getEmployeeList() {
+      getEmployeeList().then(response => {
+        this.employeeList = response.data || [];
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      if(this.selectedCompanyList == null || this.selectedCompanyList.length <= 0) {
+        this.$message.error("公司和时间为必选!");
+        return;
+      }
+      this.queryParams.pageNum = 1;
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.selectedMultipleTasks = [];
+      this.selectedCompanyList = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.queryParams.periodList = this.selectedMultipleTasks;
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.startDate = this.dateRange[0];
+        this.queryParams.endDate = this.dateRange[1];
+      } else {
+        this.queryParams.startDate = null;
+        this.queryParams.endDate = null;
+      }
+      if(this.selectedCompanyList != null && this.selectedCompanyList.length > 0) {
+        this.queryParams.userIds = this.selectedCompanyList;
+      }else {
+        this.queryParams.userIds = [];
+      }
+      const queryParams = this.queryParams;
+
+      this.$confirm('是否确认导出当前查询数据？', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return exportTodayData(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.stats-card {
+  text-align: center;
+  margin-bottom: 16px;
+
+  .stats-number {
+    font-size: 24px;
+    font-weight: bold;
+    color: #409EFF;
+
+    &.online {
+      color: #67C23A;
+    }
+
+    &.offline {
+      color: #F56C6C;
+    }
+
+    &.rate {
+      color: #E6A23C;
+    }
+  }
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+::v-deep .el-table .el-table__header th {
+  background-color: #f5f7fa;
+}
+
+::v-deep .el-alert {
+  margin-bottom: 16px;
+}
+</style>