feat: 群发送达数据

project/src/assets/config/interface_api.js

@@ -494,6 +494,10 @@ var api = {
   groupTransfer_configDetail: '/api/chatGroupTransfer/configDetail', // 客户群分配 - 配置详情
   groupTransfer_record: '/api/chatGroupTransfer/record', // 客户群分配 - 分配结果
 
+  sendData_massMsg: '/api/service/massMsg', // 群发送达数据 - 客户群发
+  sendData_chatGroupMassMsg: '/api/service/chatGroupMassMsg', // 群发送达数据 - 客户群群发
+  sendData_PeriodMassMsg: '/api/service/periodMassMsg', // 群发送达数据 - 智能群发
+
 };
 
 export { api };

project/src/components/dataBoard/sendData/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="topTagBox flex">
+      <div class="left flex-align-center">
+        <div
+          :class="['tagItem', type == 'khqf' ? 'tagItem_active' : '']"
+          @click="changeType('khqf')"
+        >
+          客户群发
+        </div>
+        <div
+          :class="['tagItem', type == 'khqqf' ? 'tagItem_active' : '']"
+          @click="changeType('khqqf')"
+        >
+          客户群群发
+        </div>
+        <div
+          :class="['tagItem', type == 'znqf' ? 'tagItem_active' : '']"
+          @click="changeType('znqf')"
+        >
+          智能群发
+        </div>
+      </div>
+    </div>
+    <keep-alive>
+      <component v-bind:is="type"></component>
+    </keep-alive>
+  </div>
+</template>
+<script>
+import khqf from "./khqf.vue";
+import khqqf from "./khqqf.vue";
+import znqf from "./znqf.vue";
+export default {
+  components: { khqf, khqqf, znqf },
+  data() {
+    return {
+      type: "khqf",
+    };
+  },
+  methods: {
+    changeType(type) {
+      this.type = type;
+    },
+  },
+};
+</script>

project/src/components/dataBoard/sendData/khqf.vue

@@ -0,0 +1,370 @@
+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex-align-center">
+      <div class="flex-align-center" style="flex: 1">
+        <datePicker
+          title="自定义"
+          :is_include_today="false"
+          :pickerOptions="pickerOptions"
+          :quickFlag="true"
+          :afferent_time="default_time"
+          :clearFlag="false"
+          @changeTime="changeTime"
+        />
+        <selfChannel
+          title="创建人"
+          type="circleCreate"
+          :labelWidth="true"
+          @channelDefine="onChangeCreate"
+        />
+        <selfInputV2
+          v-model="keyword"
+          label_name="标题"
+          placeholder="请输入关键字"
+          labelWidth
+          @change="onChangeKeyword"
+        />
+      </div>
+      <div class="right">
+        <el-button
+          v-if="isCanExport"
+          type="primary"
+          size="mini"
+          @click="init(1, 'export')"
+          >导出Excel</el-button
+        >
+      </div>
+    </div>
+    <div class="dataInfoBox">
+      <div
+        class="dataInfoItem"
+        v-for="(item, index) in dataInfoArrs"
+        :key="index"
+      >
+        <div class="dataItemTitle">
+          <img :src="item.icon" style="height: 14px" class="titleIcon" />
+          <span>{{ item.label }}</span>
+        </div>
+        <div class="dataItem-data">
+          {{
+            dataInfo && (dataInfo[item.prop] || dataInfo[item.prop] == 0)
+              ? $formatNum(dataInfo[item.prop])
+              : "-"
+          }}
+          <span class="f15">{{
+            item.brackets_prop
+              ? `(${
+                  dataInfo &&
+                  (dataInfo[item.brackets_prop] ||
+                    dataInfo[item.brackets_prop] == 0)
+                    ? $formatNum(dataInfo[item.brackets_prop])
+                    : "-"
+                })`
+              : ""
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ux-grid
+        ref="plxTable"
+        :border="false"
+        @row-click="
+          () => {
+            return;
+          }
+        "
+        :header-cell-style="
+          () => {
+            return {
+              backgroundColor: '#FFFFFF !important',
+              border: 'none!important',
+            };
+          }
+        "
+        :height="height"
+        show-footer-overflow="tooltip"
+        show-overflow="tooltip"
+        size="mini"
+      >
+        <ux-table-column
+          v-for="item in desCol"
+          v-if="!item.excelShow"
+          :key="item.prop"
+          :resizable="true"
+          :field="item.prop"
+          :title="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          :fixed="item.fixed ? item.fixed : ''"
+          align="center"
+        >
+          <template #header>
+            <div :class="['flex-align-jus-center']">
+              {{ item.label
+              }}{{ item.brackets_label ? `(${item.brackets_label})` : "" }}
+              <el-tooltip
+                v-if="item.notes"
+                :content="item.notes"
+                placement="top"
+              >
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span>{{
+              row[item.prop] !== "" &&
+              (row[item.prop] || row[item.prop] === 0 || row[item.prop] === "0")
+                ? $formatNum(row[item.prop])
+                : "-"
+            }}</span>
+            <span v-if="item.brackets_label"
+              >({{
+                row[item.brackets_prop] != "" &&
+                (row[item.brackets_prop] || row[item.brackets_prop] == 0)
+                  ? $formatNum(row[item.brackets_prop])
+                  : "-"
+              }})</span
+            >
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total > 0">
+        <el-pagination
+          background
+          :current-page="page"
+          @current-change="handleCurrentChange"
+          layout="prev, pager, next, sizes, jumper"
+          :page-sizes="[20, 50, 100]"
+          @size-change="handleSizeChange"
+          :page-count="Number(pages)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from "@/components/assembly/screen/datePicker.vue";
+import selfChannel from "@/components/assembly/screen/channel.vue";
+import selfInputV2 from "@/components/assembly/screen/inputV2.vue";
+
+export default {
+  components: { selfChannel, datePicker, selfInputV2 },
+  data() {
+    return {
+      loading: false,
+      default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
+      pickerOptions: {
+        disabledDate(time) {
+          return time > Date.now() - 8.64e7;
+        },
+      },
+      height: "",
+      creator_id: "",
+      keyword: "",
+      time: [],
+      dataInfoArrs: [
+        {
+          prop: "send_total",
+          label: "预计发送人数",
+          icon: require("@/assets/img/iconNew/充值人数@2x.png"),
+        },
+        {
+          prop: "send_success",
+          label: "送达客户数",
+          icon: require("@/assets/img/icon/总关注人数@2x.png"),
+        },
+        {
+          prop: "send_fail",
+          label: "失败客户数",
+          icon: require("@/assets/img/iconNew/总充值人数@2x.png"),
+        },
+        {
+          prop: "send_fail_user",
+          label: "失败客服数",
+          icon: require("@/assets/img/iconNew/总充值人数@2x.png"),
+        },
+      ],
+      dataInfo: {},
+      desCol: [
+        { prop: "name", label: "群发标题", fixed: "left", min_width: "160" },
+        { prop: "send_time", label: "发送时间", min_width: "160" },
+        { prop: "creator", label: "创建人" },
+        { prop: "send_total", label: "预计送达人数" },
+        { prop: "send_success", label: "送达客户数" },
+        { prop: "send_fail", label: "失败客户数" },
+        { prop: "send_fail_user", label: "失败客服数" },
+      ],
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+    };
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export;
+    },
+  },
+  created() {
+    this.time = this.default_time;
+    this.height =
+      document.documentElement.clientHeight - 400 > 400
+        ? document.documentElement.clientHeight - 400
+        : 400;
+    this.init(1);
+  },
+  methods: {
+    changeTime(time) {
+      //筛选时间变化
+      if (!time || (time && time.length == 0)) {
+        this.time = [];
+      } else {
+        this.time = time;
+      }
+      this.init(1);
+    },
+    init(page, type) {
+      if (type != "export") {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: "暂无数据可导出",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      this.loading = true;
+      this.$axios
+        .get(this.URL.BASEURL + this.URL.sendData_massMsg, {
+          params: {
+            send_time_start: this.time[0],
+            send_time_end: this.time[1],
+            creator_id: this.creator_id,
+            keyword: this.keyword,
+            page: type == "export" ? 1 : this.page,
+            page_size:
+              type == "export"
+                ? this.$store.state.exportNumber
+                : this.page_size,
+          },
+        })
+        .then((res) => {
+          var res = res.data;
+          this.loading = false;
+          if (res && res.errno == 0) {
+            console.log("res => ", res);
+            if (res.rst.data.total) {
+              // 汇总数据
+              this.dataInfo = res.rst.data.total;
+            }
+            if (type == "export") {
+              // 列表导出
+              this.exportEvent(res.rst.data.list);
+            } else {
+              // 列表数据
+              this.datas = res.rst.data.list;
+              this.$refs.plxTable && this.$refs.plxTable.reloadData(this.datas);
+              this.total = res.rst.pageInfo.total;
+              this.pages = res.rst.pageInfo.pages;
+            }
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning",
+            });
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.init(val);
+    },
+    handleSizeChange(page_size) {
+      this.page_size = page_size;
+      this.init(1);
+    },
+    exportEvent(data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      });
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      });
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: "", // 表一的sheet名字
+        },
+      ];
+      this.$exportOrder({
+        excelDatas,
+        name: `送达数据-客户群发（导出时间：${this.$getDay(0)}）`,
+      });
+    },
+    onChangeCreate(val) {
+      this.creator_id = val;
+      this.init(1);
+    },
+    onChangeKeyword(val) {
+      this.keyword = val;
+      this.init(1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  flex-wrap: wrap;
+
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 19px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/components/dataBoard/sendData/khqqf.vue

@@ -0,0 +1,371 @@
+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex-align-center">
+      <div class="flex-align-center" style="flex: 1">
+        <datePicker
+          title="自定义"
+          :is_include_today="false"
+          :pickerOptions="pickerOptions"
+          :quickFlag="true"
+          :afferent_time="default_time"
+          :clearFlag="false"
+          @changeTime="changeTime"
+        />
+        <selfChannel
+          title="创建人"
+          type="circleCreate"
+          :labelWidth="true"
+          @channelDefine="onChangeCreate"
+        />
+        <selfInputV2
+          v-model="keyword"
+          label_name="标题"
+          placeholder="请输入关键字"
+          labelWidth
+          @change="onChangeKeyword"
+        />
+      </div>
+      <div class="right">
+        <el-button
+          v-if="isCanExport"
+          type="primary"
+          size="mini"
+          @click="init(1, 'export')"
+          >导出Excel</el-button
+        >
+      </div>
+    </div>
+    <div class="dataInfoBox">
+      <div
+        class="dataInfoItem"
+        v-for="(item, index) in dataInfoArrs"
+        :key="index"
+      >
+        <div class="dataItemTitle">
+          <img :src="item.icon" style="height: 14px" class="titleIcon" />
+          <span>{{ item.label }}</span>
+        </div>
+        <div class="dataItem-data">
+          {{
+            dataInfo && (dataInfo[item.prop] || dataInfo[item.prop] == 0)
+              ? $formatNum(dataInfo[item.prop])
+              : "-"
+          }}
+          <span class="f15">{{
+            item.brackets_prop
+              ? `(${
+                  dataInfo &&
+                  (dataInfo[item.brackets_prop] ||
+                    dataInfo[item.brackets_prop] == 0)
+                    ? $formatNum(dataInfo[item.brackets_prop])
+                    : "-"
+                })`
+              : ""
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ux-grid
+        ref="plxTable"
+        :border="false"
+        @row-click="
+          () => {
+            return;
+          }
+        "
+        :header-cell-style="
+          () => {
+            return {
+              backgroundColor: '#FFFFFF !important',
+              border: 'none!important',
+            };
+          }
+        "
+        :height="height"
+        show-footer-overflow="tooltip"
+        show-overflow="tooltip"
+        size="mini"
+      >
+        <ux-table-column
+          v-for="item in desCol"
+          v-if="!item.excelShow"
+          :key="item.prop"
+          :resizable="true"
+          :field="item.prop"
+          :title="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          :fixed="item.fixed ? item.fixed : ''"
+          align="center"
+        >
+          <template #header>
+            <div :class="['flex-align-jus-center']">
+              {{ item.label
+              }}{{ item.brackets_label ? `(${item.brackets_label})` : "" }}
+              <el-tooltip
+                v-if="item.notes"
+                :content="item.notes"
+                placement="top"
+              >
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span>{{
+              row[item.prop] !== "" &&
+              (row[item.prop] || row[item.prop] === 0 || row[item.prop] === "0")
+                ? $formatNum(row[item.prop])
+                : "-"
+            }}</span>
+            <span v-if="item.brackets_label"
+              >({{
+                row[item.brackets_prop] != "" &&
+                (row[item.brackets_prop] || row[item.brackets_prop] == 0)
+                  ? $formatNum(row[item.brackets_prop])
+                  : "-"
+              }})</span
+            >
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total > 0">
+        <el-pagination
+          background
+          :current-page="page"
+          @current-change="handleCurrentChange"
+          layout="prev, pager, next, sizes, jumper"
+          :page-sizes="[20, 50, 100]"
+          @size-change="handleSizeChange"
+          :page-count="Number(pages)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from "@/components/assembly/screen/datePicker.vue";
+import selfChannel from "@/components/assembly/screen/channel.vue";
+import selfInputV2 from "@/components/assembly/screen/inputV2.vue";
+
+export default {
+  components: { selfChannel, datePicker, selfInputV2 },
+  data() {
+    return {
+      loading: false,
+      default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
+      pickerOptions: {
+        disabledDate(time) {
+          return time > Date.now() - 8.64e7;
+        },
+      },
+      height: "",
+      creator_id: "",
+      keyword: "",
+      time: [],
+      dataInfoArrs: [
+        {
+          prop: "send_user_success",
+          label: "已发送群主数",
+          icon: require("@/assets/img/iconNew/充值人数@2x.png"),
+        },
+        {
+          prop: "send_user_fail",
+          label: "未发送群主数",
+          icon: require("@/assets/img/iconNew/总充值人数@2x.png"),
+        },
+        {
+          prop: "send_chat_success",
+          label: "送达群聊数",
+          icon: require("@/assets/img/icon/总关注人数@2x.png"),
+        },
+        {
+          prop: "send_chat_fail",
+          label: "未送达群聊数",
+          icon: require("@/assets/img/iconNew/总充值人数@2x.png"),
+        },
+      ],
+      dataInfo: {},
+      desCol: [
+        { prop: "name", label: "群发标题", fixed: "left", min_width: "160" },
+        { prop: "send_time", label: "发送时间", min_width: "160" },
+        { prop: "creator", label: "创建人" },
+        { prop: "send_user_success", label: "已发送群主数" },
+        { prop: "send_user_fail", label: "未发送群主数" },
+        { prop: "send_chat_success", label: "送达群聊数" },
+        { prop: "send_chat_fail", label: "未送达群聊数" },
+        { prop: "member_count", label: "送达群聊人数" },
+      ],
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+    };
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export;
+    },
+  },
+  created() {
+    this.time = this.default_time;
+    this.height =
+      document.documentElement.clientHeight - 400 > 400
+        ? document.documentElement.clientHeight - 400
+        : 400;
+    this.init(1);
+  },
+  methods: {
+    changeTime(time) {
+      //筛选时间变化
+      if (!time || (time && time.length == 0)) {
+        this.time = [];
+      } else {
+        this.time = time;
+      }
+      this.init(1);
+    },
+    init(page, type) {
+      if (type != "export") {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: "暂无数据可导出",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      this.loading = true;
+      this.$axios
+        .get(this.URL.BASEURL + this.URL.sendData_chatGroupMassMsg, {
+          params: {
+            send_time_start: this.time[0],
+            send_time_end: this.time[1],
+            creator_id: this.creator_id,
+            keyword: this.keyword,
+            page: type == "export" ? 1 : this.page,
+            page_size:
+              type == "export"
+                ? this.$store.state.exportNumber
+                : this.page_size,
+          },
+        })
+        .then((res) => {
+          var res = res.data;
+          this.loading = false;
+          if (res && res.errno == 0) {
+            console.log("res => ", res);
+            if (res.rst.data.total) {
+              // 汇总数据
+              this.dataInfo = res.rst.data.total;
+            }
+            if (type == "export") {
+              // 列表导出
+              this.exportEvent(res.rst.data.list);
+            } else {
+              // 列表数据
+              this.datas = res.rst.data.list;
+              this.$refs.plxTable && this.$refs.plxTable.reloadData(this.datas);
+              this.total = res.rst.pageInfo.total;
+              this.pages = res.rst.pageInfo.pages;
+            }
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning",
+            });
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.init(val);
+    },
+    handleSizeChange(page_size) {
+      this.page_size = page_size;
+      this.init(1);
+    },
+    exportEvent(data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      });
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      });
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: "", // 表一的sheet名字
+        },
+      ];
+      this.$exportOrder({
+        excelDatas,
+        name: `送达数据-客户群群发（导出时间：${this.$getDay(0)}）`,
+      });
+    },
+    onChangeCreate(val) {
+      this.creator_id = val;
+      this.init(1);
+    },
+    onChangeKeyword(val) {
+      this.keyword = val;
+      this.init(1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  flex-wrap: wrap;
+
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 19px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/components/dataBoard/sendData/znqf.vue

@@ -0,0 +1,359 @@
+<template>
+  <div v-loading="loading">
+    <div class="screenBox flex-align-center">
+      <div class="flex-align-center" style="flex: 1">
+        <datePicker
+          title="自定义"
+          :is_include_today="false"
+          :pickerOptions="pickerOptions"
+          :quickFlag="true"
+          :afferent_time="default_time"
+          :clearFlag="false"
+          @changeTime="changeTime"
+        />
+        <selfChannel
+          title="创建人"
+          type="circleCreate"
+          :labelWidth="true"
+          @channelDefine="onChangeCreate"
+        />
+        <selfInputV2
+          v-model="keyword"
+          label_name="标题"
+          placeholder="请输入关键字"
+          labelWidth
+          @change="onChangeKeyword"
+        />
+      </div>
+      <div class="right">
+        <el-button
+          v-if="isCanExport"
+          type="primary"
+          size="mini"
+          @click="init(1, 'export')"
+          >导出Excel</el-button
+        >
+      </div>
+    </div>
+    <div class="dataInfoBox">
+      <div
+        class="dataInfoItem"
+        v-for="(item, index) in dataInfoArrs"
+        :key="index"
+      >
+        <div class="dataItemTitle">
+          <img :src="item.icon" style="height: 14px" class="titleIcon" />
+          <span>{{ item.label }}</span>
+        </div>
+        <div class="dataItem-data">
+          {{
+            dataInfo && (dataInfo[item.prop] || dataInfo[item.prop] == 0)
+              ? $formatNum(dataInfo[item.prop])
+              : "-"
+          }}
+          <span class="f15">{{
+            item.brackets_prop
+              ? `(${
+                  dataInfo &&
+                  (dataInfo[item.brackets_prop] ||
+                    dataInfo[item.brackets_prop] == 0)
+                    ? $formatNum(dataInfo[item.brackets_prop])
+                    : "-"
+                })`
+              : ""
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <ux-grid
+        ref="plxTable"
+        :border="false"
+        @row-click="
+          () => {
+            return;
+          }
+        "
+        :header-cell-style="
+          () => {
+            return {
+              backgroundColor: '#FFFFFF !important',
+              border: 'none!important',
+            };
+          }
+        "
+        :height="height"
+        show-footer-overflow="tooltip"
+        show-overflow="tooltip"
+        size="mini"
+      >
+        <ux-table-column
+          v-for="item in desCol"
+          v-if="!item.excelShow"
+          :key="item.prop"
+          :resizable="true"
+          :field="item.prop"
+          :title="item.label"
+          :min-width="item.min_width ? item.min_width : 120"
+          :fixed="item.fixed ? item.fixed : ''"
+          align="center"
+        >
+          <template #header>
+            <div :class="['flex-align-jus-center']">
+              {{ item.label
+              }}{{ item.brackets_label ? `(${item.brackets_label})` : "" }}
+              <el-tooltip
+                v-if="item.notes"
+                :content="item.notes"
+                placement="top"
+              >
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span>{{
+              row[item.prop] !== "" &&
+              (row[item.prop] || row[item.prop] === 0 || row[item.prop] === "0")
+                ? $formatNum(row[item.prop])
+                : "-"
+            }}</span>
+            <span v-if="item.brackets_label"
+              >({{
+                row[item.brackets_prop] != "" &&
+                (row[item.brackets_prop] || row[item.brackets_prop] == 0)
+                  ? $formatNum(row[item.brackets_prop])
+                  : "-"
+              }})</span
+            >
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total > 0">
+        <el-pagination
+          background
+          :current-page="page"
+          @current-change="handleCurrentChange"
+          layout="prev, pager, next, sizes, jumper"
+          :page-sizes="[20, 50, 100]"
+          @size-change="handleSizeChange"
+          :page-count="Number(pages)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datePicker from "@/components/assembly/screen/datePicker.vue";
+import selfChannel from "@/components/assembly/screen/channel.vue";
+import selfInputV2 from "@/components/assembly/screen/inputV2.vue";
+
+export default {
+  components: { selfChannel, datePicker, selfInputV2 },
+  data() {
+    return {
+      loading: false,
+      default_time: [this.$getDay(-8, false), this.$getDay(-1, false)],
+      pickerOptions: {
+        disabledDate(time) {
+          return time > Date.now() - 8.64e7;
+        },
+      },
+      height: "",
+      creator_id: "",
+      keyword: "",
+      time: [],
+      dataInfoArrs: [
+        {
+          prop: "send_success",
+          label: "已送达客户数",
+          icon: require("@/assets/img/iconNew/充值人数@2x.png"),
+        },
+        {
+          prop: "send_fail",
+          label: "失败客户数",
+          icon: require("@/assets/img/iconNew/总充值人数@2x.png"),
+        },
+      ],
+      dataInfo: {},
+      desCol: [
+        { prop: "group_name", label: "分组名称", fixed: "left", min_width: "160" },
+        { prop: "name", label: "sop链接标题", min_width: "160" },
+        { prop: "create_time", label: "发送时间", min_width: "160" },
+        { prop: "creator", label: "创建人" },
+        { prop: "send_success", label: "送达客户数" },
+        { prop: "send_fail", label: "失败客户数" },
+      ],
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+    };
+  },
+  computed: {
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export;
+    },
+  },
+  created() {
+    this.time = this.default_time;
+    this.height =
+      document.documentElement.clientHeight - 400 > 400
+        ? document.documentElement.clientHeight - 400
+        : 400;
+    this.init(1);
+  },
+  methods: {
+    changeTime(time) {
+      //筛选时间变化
+      if (!time || (time && time.length == 0)) {
+        this.time = [];
+      } else {
+        this.time = time;
+      }
+      this.init(1);
+    },
+    init(page, type) {
+      if (type != "export") {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: "暂无数据可导出",
+            type: "warning",
+          });
+          return;
+        }
+      }
+      this.loading = true;
+      this.$axios
+        .get(this.URL.BASEURL + this.URL.sendData_PeriodMassMsg, {
+          params: {
+            send_time_start: this.time[0],
+            send_time_end: this.time[1],
+            creator_id: this.creator_id,
+            keyword: this.keyword,
+            page: type == "export" ? 1 : this.page,
+            page_size:
+              type == "export"
+                ? this.$store.state.exportNumber
+                : this.page_size,
+          },
+        })
+        .then((res) => {
+          var res = res.data;
+          this.loading = false;
+          if (res && res.errno == 0) {
+            console.log("res => ", res);
+            if (res.rst.data.total) {
+              // 汇总数据
+              this.dataInfo = res.rst.data.total;
+            }
+            if (type == "export") {
+              // 列表导出
+              this.exportEvent(res.rst.data.list);
+            } else {
+              // 列表数据
+              this.datas = res.rst.data.list;
+              this.$refs.plxTable && this.$refs.plxTable.reloadData(this.datas);
+              this.total = res.rst.pageInfo.total;
+              this.pages = res.rst.pageInfo.pages;
+            }
+          } else if (res.errno != 4002) {
+            this.$message({
+              message: res.err,
+              type: "warning",
+            });
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.init(val);
+    },
+    handleSizeChange(page_size) {
+      this.page_size = page_size;
+      this.init(1);
+    },
+    exportEvent(data) {
+      let list = data;
+      let tHeader = this.desCol.map((v) => {
+        return v.label;
+      });
+      let filterVal = this.desCol.map((v) => {
+        return v.prop;
+      });
+      let excelDatas = [
+        {
+          tHeader: tHeader, // sheet表一头部
+          filterVal: filterVal, // 表一的数据字段
+          tableDatas: list, // 表一的整体json数据
+          sheetName: "", // 表一的sheet名字
+        },
+      ];
+      this.$exportOrder({
+        excelDatas,
+        name: `送达数据-智能群发（导出时间：${this.$getDay(0)}）`,
+      });
+    },
+    onChangeCreate(val) {
+      this.creator_id = val;
+      this.init(1);
+    },
+    onChangeKeyword(val) {
+      this.keyword = val;
+      this.init(1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px;
+}
+
+.dataInfoBox {
+  display: flex;
+  margin-top: 10px;
+  flex-wrap: wrap;
+
+  .dataInfoItem {
+    background: #ffffff;
+    border-radius: 8px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    padding: 0 19px;
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .dataItemTitle {
+      display: flex;
+      align-items: center;
+      color: #6f6f6f;
+      font-size: 13px;
+      line-height: 17px;
+      font-weight: bold;
+
+      .titleIcon {
+        height: 16px;
+        margin-right: 4px;
+      }
+    }
+
+    .dataItem-data {
+      color: #000000;
+      font-size: 19px;
+      line-height: 28px;
+      font-weight: bold;
+      margin-top: 2px;
+    }
+  }
+}
+</style>

project/src/router/allRouter.js

@@ -44,6 +44,7 @@ const thePublic = () => import(/* webpackChunkName: 'thePublic' */ '@/components
 const playletData = () => import(/* webpackChunkName: 'playletData' */ '@/components/dataBoard/playletData.vue')
 const operateDayRetrieve = () => import(/* webpackChunkName: 'operateDayRetrieve' */ '@/components/dataBoard/operateDayRetrieve.vue')
 const populariz = () => import(/* webpackChunkName: 'populariz' */ '@/components/dataBoard/populariz/index.vue')
+const sendData = () => import(/* webpackChunkName: 'sendData' */ '@/components/dataBoard/sendData/index.vue')
 const throwPerson = () => import(/* webpackChunkName: 'throwPerson' */ '@/components/dataBoard/throwPerson/index.vue')
 const regRangeReport = () => import(/* webpackChunkName: 'regRangeReport' */ '@/components/dataBoard/regRangeReport.vue')
 const regRangeReportHS = () => import(/* webpackChunkName: 'regRangeReportHS' */ '@/components/dataBoard/regRangeReportHS.vue')
@@ -888,6 +889,17 @@ export var allRouter = [
         }
       },
       {
+        path: 'sendData',
+        name: 'sendData',
+        component: sendData,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '群发送达数据',
+          isData: true
+        }
+      },
+      {
         path: 'throwPerson',
         name: 'throwPerson',
         component: throwPerson,