Procházet zdrojové kódy

提交代码-骄阳素材验证

朱鑫波 před 1 rokem
rodič
revize
7c47caf90b

+ 5 - 0
package-lock.json

@@ -12706,6 +12706,11 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
+    "tinymce": {
+      "version": "5.10.9",
+      "resolved": "https://registry.npmmirror.com/tinymce/-/tinymce-5.10.9.tgz",
+      "integrity": "sha512-5bkrors87X9LhYX2xq8GgPHrIgJYHl87YNs+kBcjQ5I3CiUgzo/vFcGvT3MZQ9QHsEeYMhYO6a5CLGGffR8hMg=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

+ 1 - 0
package.json

@@ -39,6 +39,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "@tinymce/tinymce-vue": "^2.0.0",
     "axios": "0.24.0",
+    "browser-md5-file": "^1.1.1",
     "clipboard": "2.0.8",
     "core-js": "^3.23.1",
     "cos-js-sdk-v5": "^1.3.8",

+ 51 - 0
src/api/jiaoyang/promoter.js

@@ -43,7 +43,58 @@ export function deleteById(query) {
 
 
 
+//  素材认证列表
+export function getMaterialList(query) {
+  return request({
+    url: '/jy/material/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 素材验证
+export function fileCheck(parameter) {
+  return request({
+      url: "/jy/material/checkMaterial",
+      method: 'get',
+      params: parameter
+  })
+}
 
+// 素材上传
+export function addMaterials(parameter) {
+  return request({
+      url: "/jy/material/addMaterials",
+      method: 'post',
+      data: parameter
+  })
+}
+
+// 修改素材状态
+export function editMaterialsStatus(parameter) {
+  return request({
+      url: "/jy/material/edit",
+      method: 'put',
+      data: parameter
+  })
+}
+
+// 获取违规词库
+export function getKeyWordList(parameter) {
+  return request({
+      url: "/jy/material/getKeyWordList ",
+      method: 'get',
+      params: parameter
+  })
+}
+// 添加违规词库
+export function insertKeyWord(parameter) {
+  return request({
+      url: "/jy/material/insertKeyWord",
+      method: 'post',
+      data: parameter
+  })
+}
 
 
 

+ 3 - 3
src/utils/request.js

@@ -17,9 +17,9 @@ const service = axios.create({
   // axios中请求配置有baseURL选项,表示请求URL公共部分
   // http://ruixuan.api.tjyourong.com.cn 线上
   // http://192.168.0.195:9003 测试
-  // http://192.168.1.143:9003 西
-  // http://192.168.0.228:9003 蒙蒙
-  baseURL: 'http://ruixuan.api.tjyourong.com.cn',
+  // http://192.168.1.181:9003 西
+  // http://192.168.1.211:9003 蒙蒙
+  baseURL: 'http://192.168.1.211:9003',
  //   baseURL: 'http://127.0.0.1:9003',
   // 超时
   timeout: 300000

+ 279 - 0
src/views/jiaoyang/components/uploadFile.vue

@@ -0,0 +1,279 @@
+<style></style>
+<style lang="scss" scoped></style>
+<template>
+  <div class="upload-file">
+    <el-upload
+      v-loading="percent != 0 && percent != 1 "
+      :multiple="multiple"
+      action="https://live-1301855440.cos.ap-chongqing.myqcloud.com/"
+      :before-upload="beforeUpload"
+      :accept="
+        uploadType == 'script'
+          ? '.doc,.txt,.pdf,.xlsx'
+          : uploadType + '/' + (uploadType == 'image' ? 'jpeg,image/png' : 'mp4')
+      "
+      :file-list="fileList"
+      :on-remove="removeFile"
+    >
+      <el-button size="small" type="primary" v-if="fileList.length == 0">点击上传</el-button>
+      <div class="el-upload__tip" slot="tip" style="color: red">
+        {{
+          uploadType == "image"
+            ? "请上传jpg,jpeg,png格式的图片,并且大小在" + size / 1024 + "m之内"
+            : uploadType == "video"
+            ? "请上传mp4格式,大小在" + size / 1024 + "m之内"
+            : ""
+        }}
+      </div>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+var COS = require("cos-js-sdk-v5");
+var cos = new COS({
+  SecretId: "AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets",
+  SecretKey: "tXzuwMfplTTK3c9GFUyETilasvQfePu9",
+});
+var i = 0;
+const oneKB = 1024;
+
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+}
+export default {
+  name: "upload-file",
+  components: {},
+  props: {
+    uploadType: {
+      //上传类型  值为  image/video,同时目录名称也是这样
+      type: String,
+      default() {
+        return "image";
+      },
+    },
+    multiple: {
+      // true 可以批量上传  false 不可以
+      type: Boolean,
+      default() {
+        return true;
+      },
+    },
+    fileCount: {
+      //最大上传数量
+      type: Number,
+      default() {
+        return 10;
+      },
+    },
+    checkFile: {
+      //返回promise方法,判读文件是否上传过,进行上传拦截
+      type: Function,
+      default() {
+        return Promise.resolve();
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    value: {
+      required: true,
+      default() {
+        return "";
+      },
+    },
+    size: {
+      type: Number,
+      default() {
+        if (this.uploadType == "image") {
+          return 2048;
+        } else {
+          return 102400;
+        }
+      },
+    },
+    sizeCheck: {
+      type: Boolean,
+      default() {
+        return true;
+      },
+    },
+    onOversize: {
+      type: Function,
+      default() {
+        alert(`请选择${this.size}KB内的文件!`);
+      },
+    },
+  },
+  data() {
+    return {
+      fileList: [],
+      loadingElse: false,
+      imageUrl: "",
+      percent: 0,
+      previewVisible: false,
+      previewImage: "",
+      md5: "",
+    };
+  },
+  filters: {},
+  computed: {},
+  mounted() {},
+  watch: {
+  },
+  methods: {
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    handleChange(file, fileList) {},
+    removeFile(file) {
+      // console.log(file)
+      var index = this.fileList.findIndex((v) => v.signature === file.signature);
+      this.fileList.splice(index, 1);
+      // this.$emit("removeUpload", file);
+      this.$emit("update:value", this.fileList);
+    },
+    showProgress(e) {
+      console.log(e);
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview;
+      this.previewVisible = true;
+    },
+    beforeUpload(file) {
+      this.percent = 0;
+      this.loadingElse = true;
+      const fileOvesize = file.size > this.size * oneKB;
+      // console.log(fileOvesize)
+      if (fileOvesize && this.sizeCheck) {
+        this.onOversize();
+        this.loadingElse = false;
+        return;
+      } else {
+        this.checkFile(file)
+          .then((res) => {
+            this.cosUpload(file);
+          })
+          .catch(() => {
+            this.loadingElse = false;
+          });
+        return new Promise(function (resolve, reject) {
+          reject();
+        });
+      }
+    },
+    clearAll() {
+      this.fileList = [];
+    },
+    cosUpload(file) {
+      var that = this;
+      let date = new Date();
+      let y = date.getFullYear();
+      let MM = date.getMonth() + 1;
+      MM = MM < 10 ? "0" + MM : MM;
+      let d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var timeElse = new Date().getTime();
+      var arr = file.name.split(".");
+
+      var str = "";
+      for (let i = 0; i < arr.length; i++) {
+        if (i == arr.length - 1) {
+        } else {
+          if (i == arr.length - 2) {
+            str += arr[i];
+          } else {
+            str += arr[i] + ".";
+          }
+        }
+      }
+      // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
+      cos.putObject(
+        {
+          Bucket: "live-1301855440",
+          /* 必须 */
+          Region: "ap-chongqing",
+          /* 存储桶所在地域,必须字段 */
+          Key:
+            that.uploadType +
+            "/" +
+            y +
+            "-" +
+            MM +
+            "-" +
+            d +
+            "/" +
+            str +
+            "-" +
+            timeElse +
+            "." +
+            arr[arr.length - 1],
+          /* 必须 */
+          StorageClass: "STANDARD",
+          Body: file, // 上传文件对象
+          onProgress: function (progressData) {
+            //进度条方法
+            console.log(progressData);
+            that.percent = progressData.percent;
+          },
+          onTaskReady: function (tid) {
+            // console.log('onTaskReady', tid);
+          },
+          onTaskStart: function (info) {
+            //开始上传
+            console.log("onTaskStart", info);
+          },
+        },
+        function (err, data) {
+          if (err) {
+            that.loadingElse = false;
+            that.$message.error("上传失败!!!" + err);
+            return;
+          }
+          // alert('成功')
+          that.loadingElse = false;
+          if (that.fileList.length < that.fileCount) {
+            that.fileList.push({
+              uid: file.name,
+              name: file.name,
+              status: "done",
+              url: "//" + data.Location,
+              signature: JSON.parse(data.ETag),
+            });
+
+            // that.$emit('overUpload', that.fileList.map(item => {
+            //                 return item.url
+            //               }))
+            // that.$emit("overUpload", that.fileList);
+
+            if (that.multiple) {
+              that.$emit("update:value", that.fileList);
+            } else {
+              that.$emit(
+                "update:value",
+                that.fileList.map((item) => {
+                  return item.url;
+                })[0]
+              );
+            }
+          } else {
+            that.$message.error("上传已达上限" + that.fileCount + "张");
+          }
+        }
+      );
+    },
+  },
+};
+</script>
+<style scoped></style>

+ 815 - 0
src/views/jiaoyang/jyMaterialUpload.vue

@@ -0,0 +1,815 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="素材名称" prop="materialName">
+        <el-input
+          placeholder="请输入素材名称"
+          style="width: 240px"
+          v-model="queryParams.materialName"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item label="md5" prop="signature">
+        <el-input
+          placeholder="请输入md5"
+          style="width: 240px"
+          v-model="queryParams.signature"
+        >
+        </el-input>
+      </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="primary"
+          plain
+          icon="el-icon-document-add"
+          size="mini"
+          @click="addNew"
+          >新增素材
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain size="mini" @click="showWordList"
+          >违规词库
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-tabs v-model="queryParams.materialStatus" @tab-click="handleClick">
+      <el-tab-pane
+        :label="item.label"
+        :name="item.value"
+        v-for="(item, index) in queryParamsList.tagList"
+        :key="index"
+      >
+        <!-- <el-row>
+          <el-col
+            :span="6"
+            v-for="(o, index) in typeList"
+            :key="index"
+            :offset="index > 0 ? 2 : 0"
+          >
+            <el-card :body-style="{ padding: '0px' }">
+              <img :src="o.coverUrl" class="image" style="width:100%;height:auto"/>
+              <div style="padding: 14px">
+                <span>{{ o.materialName }}</span>
+                <div class="bottom clearfix">
+                  <time class="time">{{ o.materialText }}</time>
+                  <el-button type="text" class="button">操作按钮</el-button>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row> -->
+        <div class="home-card">
+          <div class="home-item" v-for="(items, index) in typeList" :key="index">
+            <div class="home-right">
+              <span
+                style="
+                  color: #999;
+                  fontsize: 14px;
+                  padding-bottom: 10px;
+                  display: inline-block;
+                  width: 100%;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                "
+                :title="items.materialName"
+                >{{ items.materialName }}</span
+              >
+              <div
+                style="
+                  display: flex;
+                  justify-content: center;
+                  width: 100%;
+                  height: 200px;
+                  position: relative;
+                "
+              >
+                <img
+                  :src="items.coverUrl"
+                  alt
+                  style="height: 200px; max-width: 100%; position: absolute; z-index: 10"
+                  @click="showMore(items)"
+                />
+              </div>
+              <span>
+                {{ items.userName }}
+              </span>
+              <div
+                style="display: flex; margin-top: 15px; justify-content: space-between"
+              >
+                <span>{{ items.createTime.split(" ")[0] }}</span>
+                <div style="display: flex">
+                  <a
+                    style="margin-right: 5px"
+                    @click="editMaterialsStatus(items.id, '3')"
+                    v-if="queryParams.materialStatus == '3'"
+                    >验证通过</a
+                  >
+                  <a
+                    style="margin-right: 5px"
+                    @click="editMaterialsStatus(items.id, '2')"
+                    v-if="queryParams.materialStatus == '2'"
+                    >验证拒绝</a
+                  >
+                  <a @click="copyInfomation(items.materialUrl)">复制链接</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+          :pageSizes="[12, 24, 36, 48]"
+        />
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 添加直播 -->
+    <el-dialog
+      :title="'新增素材'"
+      :visible.sync="openAllocation"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="formBroadcast"
+        :model="formBroadcast"
+        :rules="rulesBroadcast"
+        label-width="100px"
+        :inline="true"
+      >
+        <el-form-item label="创建人" prop="userName" style="width: 100%">
+          {{ $store.getters.name }}
+        </el-form-item>
+        <el-form-item label="上传素材" prop="url" style="width: 100%">
+          <!-- v-loading="formBroadcast.urlList.length != md5Arr.length" -->
+          <uploadFile
+            uploadType="video"
+            :multiple="true"
+            :checkFile="checkFileOk"
+            :value.sync="formBroadcast.urlList"
+            :removeUpload="remove"
+            ref="uploadFile"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="submitFormBroadcast"
+          :loading="confirmLoading"
+          :disabled="formBroadcast.urlList.length == 0"
+          >确 定
+        </el-button>
+        <el-button
+          @click="
+            confirmLoading = false;
+            openAllocation = false;
+            formBroadcast = { urlList: [] };
+            $refs.uploadFile.fileList = [];
+          "
+          >取 消
+        </el-button>
+      </div>
+    </el-dialog>
+    <!-- 查看详情 -->
+    <el-dialog
+      title="查看详情"
+      :visible.sync="refuseVisible"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div v-if="refuseInfo" style="width: 100%; display: flex">
+        <div
+          class="video-content"
+          style="
+            width: 50%;
+            padding: 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: center;
+            border-right: 1px solid #f2f2f2;
+          "
+        >
+          <video
+            class="video"
+            :src="refuseInfo.materialUrl"
+            controls="controls"
+            style="width: 70%"
+            controlslist="nodownload"
+          >
+            您的浏览器不支持 video 标签。
+          </video>
+        </div>
+        <div
+          style="
+            width: 50%;
+            padding: 10px;
+            box-sizing: border-box;
+            justify-content: center;
+            border-right: 1px solid #f2f2f2;
+          "
+        >
+          <h4><span class="prefix"></span>配音</h4>
+          <div
+            v-if="refuseInfo.violatingText"
+            v-html="
+              brightenKeyword(
+                refuseInfo.materialText,
+                JSON.parse(refuseInfo.violatingText)
+                  .map((c) => {
+                    return c.keyWord;
+                  })
+                  .join(',')
+              )
+            "
+          ></div>
+          <div v-else>
+            {{ refuseInfo.materialText }}
+          </div>
+          <!-- v-html="brightenKeyword(record.productName,oldSearchText)" -->
+          <div v-if="refuseInfo.violatingText">
+            <h4><span class="prefix"></span>违规词</h4>
+            <div
+              v-for="(item, index) in JSON.parse(refuseInfo.violatingText)"
+              :key="index"
+            >
+              <span> {{ item.type }}:</span>
+              <span style="color: darkgoldenrod">
+                {{ item.keyWord }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 违规词库 -->
+    <el-dialog
+      title="违规词库"
+      :visible.sync="wordListVisible"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-table v-loading="wordLoading" :data="wordList" ref="multipleTable">
+        <el-table-column label="类型" align="center" prop="type" width="300">
+        </el-table-column>
+
+        <el-table-column label="关键词" align="center" prop="key_word"> </el-table-column>
+      </el-table>
+      <pagination
+        v-show="wordTotal > 0"
+        :total="wordTotal"
+        :page.sync="wordParams.pageNum"
+        :limit.sync="wordParams.pageSize"
+        @pagination="getKeyWordList"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { refreshCache } from "@/api/system/dict/type";
+import {
+  getMaterialList,
+  fileCheck,
+  addMaterials,
+  editMaterialsStatus,
+  getKeyWordList,
+  insertKeyWord,
+} from "@/api/jiaoyang/promoter";
+import uploadFile from "./components/uploadFile.vue";
+import BMF from "browser-md5-file";
+export default {
+  name: "List",
+  components: {
+    uploadFile,
+  },
+  data() {
+    return {
+      mediaId: "2",
+      byteDanceItemType: "2",
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: null,
+      idElse: null,
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      //上传文件类型
+      fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      openFp: false,
+      formFp: {},
+      // 是否可编辑
+      edit: false,
+      // 分配销售
+      openAllocation: false,
+      // 选择的销售id
+      saleId: undefined,
+      // 销售列表
+      saleList: [],
+      // 分配销售确定loading
+      confirmLoadingSale: false,
+      // 日期范围
+      dateRange: [],
+      superiorList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 12,
+        materialName: undefined,
+        signature: undefined,
+        materialStatus: "1",
+      },
+      wordParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      //页面所有的下拉数据
+      queryParamsList: {
+        tagList: [
+          { value: "1", label: "待处理" },
+          { value: "2", label: "验证通过" },
+          { value: "3", label: "验证拒绝" },
+        ],
+        categoryIdList: [],
+        mediaList: [
+          { value: 2, label: "快手" },
+          { value: 1, label: "抖音" },
+        ],
+      },
+      // 表单参数
+      form: {},
+      formBroadcast: {
+        urlList: [],
+      },
+
+      formRuleEdit: {},
+      options: [],
+      regInfo: [],
+      ruleInfo: [],
+      //上传报表下拉数据
+      formList: {},
+      fileList: [],
+      accept: "",
+      //获取销售线索文件流
+      dateFile: new FormData(),
+      //销售线索上传loading
+      confirmLoading: false,
+      // 表单校验
+      rules: {},
+      ruleEdit: {
+        ruleId: {
+          required: true,
+          message: "结算规则必选",
+          trigger: "change",
+        },
+      },
+      rulesBroadcast: {},
+      // 分配销售展示列表
+      ksInfo: null,
+      userId: null,
+      refuseVisible: false,
+      refuseLoading: false,
+      refuseInfo: null,
+      relateId: null,
+      md5Arr: [],
+      wordListVisible: false,
+      wordList: [],
+      wordTotal: 0,
+      wordLoading: false,
+    };
+  },
+  created() {
+    this.userId = this.$store.getters.userId;
+    this.getList();
+  },
+  filters: {
+    activityItemStatusName(status) {
+      const statusMap = {
+        1: "待审核",
+        2: "已上架",
+        3: "审核失败(拒绝)",
+        4: "活动结束",
+        5: "失效",
+      };
+      return statusMap[status];
+    },
+  },
+  watch: {
+    "formBroadcast.partnerRecommendText": function (n, o) {
+      // console.log(n.replace(/<p>|<\/?p>|&nbsp;/gim, ""));
+    },
+  },
+  methods: {
+    showWordList() {
+      this.wordListVisible = true;
+      this.getKeyWordList();
+    },
+    getKeyWordList() {
+      this.wordLoading = true;
+      getKeyWordList(this.wordParams).then((res) => {
+        if (res.code == 200) {
+          this.wordList = res.rows;
+          this.wordTotal = res.total;
+          this.wordLoading = false;
+        }
+      });
+    },
+
+    editMaterialsStatus(id, status) {
+      this.$modal
+        .confirm(`请确认是否${status == "2" ? "拒绝" : "通过"}该素材?`)
+        .then(() => {
+          var params = {};
+          params.id = id;
+          params.materialStatus = status == "2" ? 3 : 2;
+          editMaterialsStatus(params)
+            .then((res) => {
+              this.getList();
+              this.$modal.msgSuccess(res.msg);
+            })
+            .catch((err) => {});
+        })
+        .catch(() => {});
+    },
+    remove(fileList) {
+      console.log(fileList);
+    },
+    checkFileOk(file) {
+      var bmf = new BMF();
+      var that = this;
+      return new Promise(function (resolve, reject) {
+        bmf.md5(file, (err, md5) => {
+          if (that.md5Arr.findIndex((item) => item == md5) > -1) {
+          } else {
+            that.md5Arr.push(md5);
+          }
+
+          // that.ruleForm.urlList = []
+          fileCheck({
+            signature: md5,
+          }).then((res) => {
+            if (!res.data) {
+              that.$message.error("素材" + file.name + "已经上传");
+
+              reject();
+            } else {
+              resolve();
+              //   reject()
+            }
+          });
+        });
+      });
+    },
+    getRedWords(contentText, keyword) {
+      let keywordArray = keyword.split(",");
+      let wordsArray = [];
+      for (let key of keywordArray) {
+        if (contentText.includes(key)) {
+          wordsArray.push(key);
+        }
+      }
+      return wordsArray;
+    },
+    brightenKeyword(contentText, keyword) {
+      let wordsArray = this.getRedWords(contentText, keyword);
+      let res = contentText; //res的初始值是不带任何红色格式的
+      //遍历相同字数组,
+      for (let word of wordsArray) {
+        const Reg = new RegExp(word, "i");
+        //替换每一个相同字
+        res = res.replace(Reg, `<span style="color: darkgoldenrod;">${word}</span>`);
+      }
+      return res; //此时的res里已经将需要标红的字体带上了格式(<span style="color:red"></span>)
+    },
+    showMore(item) {
+      this.refuseVisible = true;
+      this.refuseInfo = item;
+    },
+    copyInfomation(value) {
+      if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard
+          .writeText(`${value}`)
+          .then(() => {
+            this.$message.success("复制成功");
+          })
+          .catch((err) => {
+            this.$message.error("复制失败");
+          });
+      } else {
+        // 创建text area
+        const textArea = document.createElement("textarea");
+        textArea.value = `${value}`;
+        // 使text area不在viewport,同时设置不可见
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        return new Promise((resolve, reject) => {
+          // 执行复制命令并移除文本框
+          document.execCommand("copy") ? resolve() : reject(new Error("出错了"));
+          textArea.remove();
+        }).then(
+          () => {
+            this.$message.success("复制成功");
+          },
+          () => {
+            this.$message.error("复制失败");
+          }
+        );
+      }
+    },
+    handleNodeClick(val) {
+      console.log(val);
+      this.$set(this.formBroadcast, "postArea", val.id);
+      this.$set(this.formBroadcast, "postAreaName", val.name);
+      if (!val.children || val.children.length == 0) {
+        this.$refs.selectReport.blur();
+      }
+    },
+    handleClick() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+
+      getMaterialList({ userId: this.userId, ...this.queryParams }).then((response) => {
+        this.typeList = response.list;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.confirmLoading = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {};
+      this.dateFile = null;
+      this.resetForm("formBroadcast");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.mediaId = undefined;
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    addNew() {
+      this.openAllocation = true;
+      this.edit = false;
+      this.ids = null;
+      this.confirmLoading = false;
+      this.formBroadcast = { urlList: [] };
+    },
+    /** 编辑地址 新增达人*/
+    handleAddbroadcast(item) {},
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+    },
+    /** 修改/绑定结算规则 */
+    submitFormRuleEdit() {
+      this.$refs["formRuleEdit"].validate((valid) => {
+        if (valid) {
+        }
+      });
+    },
+    /** 新增素材确定按钮 */
+    submitFormBroadcast: function () {
+      this.$refs["formBroadcast"].validate((valid) => {
+        if (valid) {
+          this.confirmLoading = true;
+          var params = {};
+          params.userId = this.userId;
+          params.userName = this.$store.getters.name;
+          params.materialList = this.formBroadcast.urlList.map((item) => {
+            return {
+              signature: item.signature,
+              materialUrl: item.url,
+              materialName: item.name,
+            };
+          });
+          addMaterials(params).then((res) => {
+            this.confirmLoading = false;
+            if (res.code == 0) {
+              this.$message.success(res.message);
+              this.openAllocation = false;
+              this.formBroadcast = { urlList: [] };
+              this.$refs.uploadFile.fileList = [];
+            } else {
+              this.$message.error(res.message);
+            }
+          });
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          var fileList = this.$refs.fileUploadDialog.fileList;
+          var dapanUrls = this.$refs.fileUpload.fileList;
+          var portraitUrls = this.$refs.fileUploadFx.fileList;
+          if (fileList.length == 0 && dapanUrls.length == 0 && portraitUrls.length == 0) {
+            this.$message.error("直播数据,数据大盘,画像分析必须最少上传一项");
+            return;
+          } else {
+            this.confirmLoading = true;
+            let formData = new FormData();
+            this.ids;
+            formData.append("id", this.ids);
+            formData.append("actualGmv", this.delcommafy(this.form.actualGmv));
+            formData.append(
+              "dapanUrls",
+              JSON.stringify(
+                dapanUrls.map((item) => {
+                  return item.url;
+                })
+              )
+            );
+            formData.append(
+              "portraitUrls",
+              JSON.stringify(
+                portraitUrls.map((item) => {
+                  return item.url;
+                })
+              )
+            );
+            fileList.forEach((file) => formData.append("files", file.raw));
+            dataUpload(formData)
+              .then((res) => {
+                this.confirmLoading = false;
+                this.$message.success("上传成功");
+                this.open = false;
+                this.ids = null;
+                this.cancel();
+                this.handleQuery();
+              })
+              .catch((err) => {
+                this.confirmLoading = false;
+              });
+          }
+          console.log(fileList, dapanUrls, portraitUrls);
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.prefix {
+  display: inline-block;
+  width: 3px;
+  height: 15px;
+  background: rgb(104, 163, 253);
+  position: relative;
+  top: 2px;
+  margin-right: 5px;
+}
+.entire-line {
+  width: 100%;
+
+  ::v-deep .el-form-item__content {
+    width: 60%;
+  }
+}
+
+::v-deep .el-form-item__label {
+  white-space: nowrap;
+}
+</style>
+<style scoped lang="scss">
+::v-deep a {
+  color: #409eff;
+  display: block;
+  text-align: left;
+}
+
+.item-name-calss p {
+  margin: 0;
+  text-align: left;
+}
+
+.tableBox {
+  width: 100%;
+}
+
+::v-deep .el-tabs__content {
+  overflow: initial;
+}
+.home-card {
+  width: 100%;
+  overflow: hidden;
+  padding: 10px 0px;
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -10px;
+
+  .home-right {
+    width: 100%;
+  }
+
+  .bg:after {
+    content: "";
+    width: 110%;
+    height: 110%;
+    position: absolute;
+    left: -5%;
+    top: -5%;
+    background: inherit;
+    filter: blur(10px);
+    z-index: 2;
+  }
+}
+.home-item {
+  overflow: hidden;
+}
+
+@media only screen and (min-width: 1200px) {
+  .home-item {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #e4e4e4;
+    width: calc(50% - 10px);
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    position: relative;
+    z-index: 99;
+  }
+}
+
+/*>=1024的设备*/
+
+// @media (min-width: 1100px) {
+//     .checkbox_item_container {
+//         width:70%
+//     }
+// } /*>=1100的设备*/
+@media only screen and (min-width: 1250px) {
+  .home-item {
+    border-style: solid;
+    border-width: 1px;
+    border-color: #e4e4e4;
+    width: calc(25% - 10px);
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    position: relative;
+    z-index: 99;
+  }
+}
+</style>