axwen-test31 2.0.0

package/src/views/home-new/channel-data.vue

@@ -0,0 +1,95 @@
+<template>
+  <div style="margin-top: 12px">
+    <PartBody label="渠道数据概览">
+      <div class="channel-data">
+        <div class="top" v-loading="channelInfoLoading">
+          <small-card class="small-card" v-for="item in smallCardOptions" :key="item.prop" :dataInfo="channelInfo" v-bind="item"></small-card>
+        </div>
+        <div class="center" v-loading="channelInfoLoading">
+          <chart-parent class="chart" showTitle="渠道引用次数" :chartData="channelInfo.quotes" :chartOption="pieChartConfigHorizontal" label="渠道应用占比分析" />
+        </div>
+      </div>
+    </PartBody>
+  </div>
+</template>
+
+<script>
+import PartBody from './components/part-body.vue'
+import SmallCard from './components/statistics-small-card.vue'
+import ChartParent from './components/chart-parent.vue'
+import { columnsConfig, pieChartConfigHorizontal } from './common/option.js'
+import { getChannelInfo }  from '@/api/newHome'
+export default {
+  components: { SmallCard, ChartParent, PartBody },
+  props: {
+    dateRange: {
+      type: Array,
+      default:() => []
+    }
+  },
+  data () {
+    return {
+      columnsConfig,
+      pieChartConfigHorizontal,
+      channelInfoLoading: false,
+      channelInfo: {},
+      activeTab: 'quotes',
+      smallCardOptions: Object.freeze([
+        { label: '渠道总数', prop: 'countChannel', icon: require('@/assets/svg/channel.svg'), subLabel: '使用率', subProp: 'useChannelRate' },
+      ])
+    }
+  },
+  watch: {
+    dateRange: {
+      deep: true,
+      handler() {
+        this.queryChannelInfo()
+      }
+    }
+  },
+  computed: {
+    _chartList () {
+      return this.channelInfo[this.activeTab] || []
+    }
+  },
+  methods: {
+    queryChannelInfo() {
+      const params = {
+        startDt: this.dateRange[0],
+        endDt: this.dateRange[1]
+      }
+      this.channelInfoLoading = true
+      getChannelInfo(params).then(res => {
+        this.channelInfo = res.data
+      }).finally(() => this.channelInfoLoading = false)
+    }
+  },
+  created() {
+    this.queryChannelInfo()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.channel-data {
+  margin-top: 12px;
+  
+  .top {
+    display: flex;
+    min-height: 60px;
+    margin-bottom: 12px;
+
+    .small-card {
+      flex: 1;
+    }
+  }
+
+  .center {
+    height: 310px;
+
+    .chart {
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/views/home-new/common/option.js

@@ -0,0 +1,260 @@
+
+export const pieChartConfig = {
+  tooltip: {
+    trigger: 'item',
+    formatter: params => {
+      const { marker, name, value, percent } = params
+      return `
+        ${marker} <strong>${name}</strong><br/>
+        数值：${value}<br/>
+        占比：${percent}%
+      `
+    }
+  },
+  legend: {
+    type: 'scroll',
+    orient: 'vertical',
+    left: 18,
+    right: 0,
+    top: 235,
+    bottom: 0,
+    itemWidth: 9,
+    itemHeight: 9,
+    tooltip: {
+      show: true
+    },
+    textStyle: {
+      rich: {
+        name: {
+          color: '#333',
+        },
+        value: {
+          color: '#000',
+        },
+        percent: {
+          align: 'right',
+          color: '#999',
+        },
+      }
+    }
+  },
+  color: ['#5984F6', '#4BD294', '#F7C244', '#F77151', '#6F63EA', '#E13EDB'],
+  title: {
+    left: 18, 
+    top: 210, 
+    textStyle: {
+      rich: {
+        name: {
+          color: '#333',
+          fontWeight: 'bold'
+        },
+        value: {
+          color: '#000',
+          align:'right',
+          fontWeight: 'bold'
+        },
+      }
+    }
+  },
+  series: {
+    type: 'pie',
+    radius: ['20%', '40%'],
+    center: ['50%', '32%'],
+    data: [],
+    // label: {
+    //   show: false,
+    //   position: 'center'
+    // },
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowColor: 'rgba(0, 0, 0, 0.5)'
+      }
+    }
+  }
+}
+export const pieChartConfigHorizontal = {
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    type: 'scroll',
+    orient: 'vertical',
+    left: '55%',
+    top: '20%',
+    height: '80%',
+    itemWidth: 9,
+    itemHeight: 9,
+    tooltip: {
+      show: true
+    },
+  },
+  color: ['#5984F6', '#4BD294', '#F7C244', '#F77151', '#6F63EA'],
+  title: {
+    text: '总活动总数',
+    subtext: '总活动总数',
+    left: '55%', // 标题距离左边位置，可以使用right
+    top: '0%', // 标题距离底部位置，可以使用top
+    textStyle: { // 主标题样式
+      fontSize: 14,
+      color: "#fff"
+    },
+    subtextStyle: { // 副标题样式
+      fontFamily: "微软雅黑",
+      fontSize: 12,
+      color: '#333333',
+      fontWeight: 'bold'
+    }
+  },
+  series:
+  {
+    type: 'pie',
+    radius: ['40%', '75%'],
+    center: ['30%', '55%'],
+    data: [],
+    // label: {
+    //   show: false,
+    //   position: 'center'
+    // },
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowColor: 'rgba(0, 0, 0, 0.5)'
+      }
+    }
+  }
+}
+
+export const columnsConfig = {
+  // 活动数据
+  activityData: Object.freeze([
+    { label: '排名', prop: 'sort', width: 40 },
+    { label: '机构名称', prop: 'name', minWidth: 60, 'show-overflow-tooltip': true },
+    { label: '活动总数', prop: 'actCount', width: 60 },
+    { label: '覆盖人数', prop: 'actCoverCstCount', width: 75 },
+    // { label: '活动人数', prop: 'actSumCstCount', minWidth: 80 },
+    // { label: '营销成功率', prop: 'marketSuccessPoint', minWidth: 80 }
+  ]),
+  // 标签数据
+  labelData: Object.freeze([
+    { label: '排名', prop: 'sort', width: 60 },
+    { label: '标签名称', prop: 'labelName', minWidth: 80 },
+    { label: '使用次数', prop: 'num', width: 120, sortable: true },
+    { label: '一级目录', prop: 'lev1', minWidth: 80 },
+    { label: '标签类型', prop: 'showTypeName', width: 80 },
+  ]),
+}
+
+export const detailConfig = {
+  // 群组
+  group: {
+    icon: require('@/assets/svg/group.svg'),
+    labelFileds: Object.freeze({
+      countGroup: '客户群组总数',
+      coverCount: '客群覆盖人数',
+      useGroupRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      fileCount: '文件导入人数',
+      tsCount: '标签探索人数',
+      aitiveCount: '活动来源人数',
+      // coverCount: '客群覆盖人数',
+      aiCount: 'AI模型来源人数',
+    }),
+    type: 'center'
+  },
+  // 事件总线
+  event: {
+    icon: require('@/assets/svg/event.svg'),
+    labelFileds: Object.freeze({
+      countEvent: '事件总数',
+      useEventRate: '事件使用率',
+    }),
+    subFileds: Object.freeze({
+      countRealEvent: '实时事件',
+      countEndDayEvent: '日终事件',
+      // countScEvent: '神策事件'
+      countCombineEvent: '组合事件'
+    })
+  },
+  // 短信
+  message: {
+    icon: require('@/assets/svg/message.svg'),
+    labelFileds: Object.freeze({
+      countSms: '短信模板数',
+      useSmsRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      todoSms: '待审批',
+      susSms: '审批通过',
+      failSms: '审批不通过'
+    })
+  },
+  // app
+  app: {
+    icon: require('@/assets/svg/app.svg'),
+    labelFileds: Object.freeze({
+      countAppMsg: 'APP消息模板数',
+      useAppMsgRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      todoAppMsg: '待审批',
+      susAppMsg: '审批通过',
+      failAppMsg: '审批不通过'
+    })
+  },
+  // 产品
+  product: {
+    icon: require('@/assets/svg/product.svg'),
+    labelFileds: Object.freeze({
+      countPrduct: '产品数',
+      prductRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      c: '理财',
+      d: '基金',
+      e: '保险',
+      f: '贷款',
+      g: '贵金属'
+    })
+  },
+  // 权益
+  equity: {
+    icon: require('@/assets/svg/equity.svg'),
+    labelFileds: Object.freeze({
+      countGift: '权益数',
+      giftRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      countGiftPackage: '权益礼包数',
+      giftPackageRate: '权益礼包使用率'
+    })
+  },
+  // 模板
+  template: {
+    icon: require('@/assets/svg/template.svg'),
+    labelFileds: Object.freeze({
+      countImgTemp: '图文模板数',
+      useImgTempRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      todoImgTemp: '待审批',
+      susImgTemp: '审批通过',
+      failImgTemp: '审批不通过'
+    })
+  },
+  // 活动
+  activity: {
+    icon: require('@/assets/svg/activity.svg'),
+    labelFileds: Object.freeze({
+      countThird: '运营活动数',
+      activeRate: '使用率',
+    }),
+    subFileds: Object.freeze({
+      countMf: '外部活动',
+      // d: '第三方外部系统'
+    })
+  },
+}

package/src/views/home-new/components/AnnoumcementDetail.vue

@@ -0,0 +1,234 @@
+<template>
+  <el-dialog
+    :visible="visible"
+    :title="title"
+    align-center
+    width="1000px"
+    custom-class="custom-dialog"
+    :z-index="9999"
+    @closed="closed"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <div v-loading="loading" class="dialog-content">
+      <el-form
+        ref="refForm"
+        :model="form"
+        :rules="rules"
+        label-width="80px"
+        label-position="right"
+        :disabled="disabled"
+        :hide-required-asterisk="disabled"
+      >
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <el-form-item label="标题:" prop="title">
+              <span class="showcontent">{{ form.title }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="生效时间:" prop="time">
+              <span v-if="form.time && form.time.length" class="showcontent">
+                {{ form.time[0] }} 至 {{ form.time[1] }}
+              </span>
+              <span v-else>-</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
+        <el-form-item label="正文:" prop="content">
+          <!-- <div class="rich-text-content" v-html="form.content" ></div> -->
+          <editor v-model="form.content" :image-files="form.contentAttachments" :height="360" :disabled="true" />
+        </el-form-item>
+        
+        <el-form-item label="附件:" prop="attachments">
+          <div class="attachment-container">
+            <i class="el-icon-tickets attachment-icon"></i>
+            <!-- <el-icon-tickets class="attachment-icon"></el-icon-tickets> -->
+            <ul v-if="form.attachments && form.attachments.length" class="attachment-list">
+              <li
+                v-for="file in form.attachments"
+                :key="file.id"
+                class="attachment-item"
+                @click="downloadFile(file.fileUrl, file.fileName)"
+              >
+                {{ file.fileName }}
+              </li>
+            </ul>
+            <span v-else class="no-attachment">无附件</span>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    
+    <template v-if="!disabled" slot="footer">
+      <el-button plain @click="handleCancel">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { GetNoticeById } from '@/api/newHome'
+import editor from "@/components/Editor.vue";
+export default {
+  name: 'NoticePreviewDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    id: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  components: { editor },
+  data() {
+    return {
+      disabled: true, // 始终为预览模式
+      loading: false,
+      title: '预览公告',
+      form: {
+        id: '',
+        title: '',
+        time: [],
+        content: '',
+        attachments: [],
+        contentAttachments: []
+      },
+      rules: {} // 预览模式不需要验证规则
+    }
+  },
+  watch: {
+    // 监听ID变化自动加载数据
+    id: {
+      immediate: true,
+      handler(newId) {
+        if (newId) {
+          this.queryNoticeDetail(newId)
+        } else {
+          this.resetForm()
+        }
+      }
+    }
+  }, 
+  methods: {
+    // 查询公告详情
+    queryNoticeDetail(id) {
+      this.loading = true
+      GetNoticeById(id)
+        .then((res) => {
+          const { startDate, endDate, title, content, attachments, contentAttachments } =
+            res.data || {}
+          this.form.title = title || ''
+          this.form.time = [startDate, endDate].filter(Boolean)
+          this.form.content = content || ''
+          this.form.attachments = attachments || []
+          this.form.contentAttachments = contentAttachments || []
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    
+    // 关闭弹窗
+    handleCancel() {
+      this.$emit('update:visible', false)
+    },// 弹窗关闭后重置表单
+    closed() {
+      // this.resetForm()
+    },
+    
+    // 重置表单数据
+    resetForm() {
+      this.form = {
+        id: '',
+        title: '',
+        time: [],
+        content: '',
+        attachments: [],
+        contentAttachments: []
+      }
+    },
+    
+    // 下载文件
+    downloadFile(fileUrl, fileName) {
+      const link = document.createElement('a')
+      link.href = fileUrl
+      link.download = fileName || 'download'
+      link.style.display = 'none'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+}
+</script>
+<style scoped>
+/* 弹窗内容区域样式 */
+.dialog-content {
+  padding: 0 20px 20px;
+  /* overflow-y: auto; */
+  max-height: 500px;
+  min-height: 500px;
+}
+
+/* 自定义弹窗高度 */
+:deep(.custom-dialog) {
+  height: auto;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.custom-dialog .el-dialog__body) {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+  height: 500px;
+}
+
+/* 附件样式 */
+.attachment-container {
+  display: flex;
+  align-items: flex-start;
+}
+
+.attachment-icon {
+  margin-top: 10px;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.attachment-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.attachment-item {
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.attachment-item:hover {
+  background-color: #f0f7ff;
+  color: #409eff;
+}
+
+.no-attachment {
+  color: #999;
+}
+
+/* 富文本内容样式 */
+.rich-text-content {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  min-height: 362px;
+  max-height: 362px;
+  overflow-y: auto;
+}
+
+.showcontent{
+  padding-left: 5px;
+}
+</style>

package/src/views/home-new/components/chart-container.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :ref="id || 'container'" class="container" v-bind="$attrs"></div>
+</template>
+<script>
+export default {
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    id: String
+  },
+  data() {
+    return {
+      defaultOption: {},
+      myChart: undefined
+    }
+  },
+  computed: {
+    _options() {
+      return Object.assign({}, this.defaultOption, this.option)
+    }
+  },
+  methods: {
+    reInit(option) { 
+      this.myChart.setOption(option)
+    },
+    init() {
+      const dom = this.$refs[this.id || 'container']
+      if (!dom) return
+      this.myChart = this.$echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+      })
+
+      this.myChart.setOption(this._options)
+
+      window.addEventListener('resize', this.myChart.resize)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() { 
+    window.removeEventListener('resize', this.myChart.resize)
+  }
+}
+</script>
+<style scoped lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+}
+</style>