storevisit-ui-mobile/src/views/intelligence/index.vue

<template>
  <div class="pageya" ref="snb">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="AI销售参谋" />
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <van-pull-refresh
      v-model="loading"
      :success-text="successText"
      @refresh="onLoad"
      :immediate-check="false">
      <div id="snb" ref="snb1">
        <div style="font-size: 14px" v-for="(item, index) in Ggreet" :key="index">
          <div style="margin: 14px" v-if="item.chatRecordFrom == 'ai' || item.chatRecordFrom == 2">
            <van-row>
              <van-col span="4" @click="clears"
                ><van-image
                  :src="aiselect"
                  style="
                    float: right;
                    background-color: #fff;
                    border-radius: 6px;
                    width: 46px;
                    height: 46px;
                  "
              /></van-col>
              <van-col span="16">
                <div
                  style="
                    text-align: left;
                    background-color: white;
                    min-height: 44px;
                    margin: 0 10px;
                    padding: 10px;
                    border-radius: 6px;
                  "
                  v-for="(itemChild, itemIndex) in item.aiResponseMobiles"
                  :key="itemIndex">
                  <template v-if="itemChild.type == 'AI_WIRING_SCENE'">
                    <p
                      style="text-decoration: underline; color: #1c84c6; word-break: break-all"
                      @click="choiceSelct(itemChild)">
                      <img src="./../../assets/Icon/clcik.png" style="width: 20px; float: left" />
                      <span>跳转高销额列表</span>
                    </p>
                  </template>
                  <template v-else>
                    <p style="word-break: break-all">{{ itemChild.voiceText }}</p>
                    <p style="word-break: break-all">{{ itemChild.description }}</p>
                    <p v-for="(sbpm, pmsb) in itemChild.textList" :key="pmsb" v-html="sbpm"></p>
                    <div v-if="(itemChild.type = 'answer_radio')">
                      <div
                        v-for="(sbpm, pmsb) in itemChild.optionsList"
                        :key="pmsb"
                        style="margin-top: 10px">
                        <p
                          style="text-decoration: underline; color: #1c84c6; word-break: break-all"
                          @click="choiceSelct(sbpm, itemChild)">
                          <img
                            src="./../../assets/Icon/clcik.png"
                            style="width: 20px; float: left" /><span v-html="sbpm.radioName"></span>
                        </p>
                      </div></div
                  ></template>
                </div>
              </van-col>
              <van-col span="4"></van-col>
            </van-row>
          </div>
          <div style="margin: 14px" v-if="item.chatRecordFrom == 1">
            <van-row>
              <van-col span="4"></van-col>
              <van-col span="16">
                <div
                  style="
                    text-align: left;
                    background-color: #a0e75a;
                    min-height: 44px;
                    margin: 0 10px;
                    padding: 10px;
                    border-radius: 6px;
                    display: inline-block;
                    float: right;
                  ">
                  <p style="word-break: break-all" @click="voiceText(item)">
                    {{ item.chatRecordText }}
                  </p>
                </div>
              </van-col>
              <van-col span="4"
                ><van-image
                  :src="avatar"
                  style="
                    float: left;
                    background-color: #fff;
                    width: 44px;
                    height: 44px;
                    border-radius: 6px;
                  "
              /></van-col>
            </van-row>
          </div>
          <!--      <div style="margin: 14px" v-if="one1">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!--  margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>符合您要求的有20家</p>-->
          <!--              <p style="line-height: 24px">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="goFn(4)"><img src="./../../assets/Icon/clcik.png"  style="width: 22px;float: left;">请点击查看门店列表</a>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one9">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px; margin:0 10px;padding: 10px;border-radius: 6px">-->
          <!--              我的分销店中，哪些还没参加碰瓷专案？-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one10">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!--    margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>符合您要求的有8家</p>-->
          <!--             <p style="line-height: 24px">-->
          <!--                           <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="goFn(2)"><img src="./../../assets/Icon/clcik.png"  style="width: 22px;float: left;">请点击查看门店列表</a>-->
          <!--                    </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one11">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px; margin:0 10px;padding: 10px;border-radius: 6px">-->
          <!--              我的门店中，本月还没进货专业时时丽的有哪些?-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one12">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!-- margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>您指的是哪种门店类型？</p>-->
          <!--              <p style="line-height: 24px">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="typw(1)">1.金牌店</a>-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" @click="typw(2)">2.所有分销店</a>-->
          <!--&lt;!&ndash;                @click="typw(3)&ndash;&gt;-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6;" >3.以上都不是，请具体描述门店类型</a>-->
          <!--              </p>-->

          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one14">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px;float: right;">-->
          <!--              <p>-->
          <!--                1.金牌店-->
          <!--              </p>-->
          <!--            </div>-->

          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one15">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!-- margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>-->
          <!--                符合您要求的有15家-->
          <!--              </p>-->
          <!--              <p @click="goFn(3)">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击查看门店列表。</a>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one16">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px;    float: right;">-->
          <!--              <p>-->
          <!--                2.所有分销店-->
          <!--              </p>-->

          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one17">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!-- margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>-->
          <!--                符合您要求的有15家-->
          <!--              </p>-->
          <!--              <p @click="goFn(3)">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击查看门店列表。</a>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one18">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px">-->
          <!--              2个月业绩小于20000元的金牌店-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="one19">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!-- margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>-->
          <!--                已为您筛选20家2个月业绩小于20000元的金牌店-->
          <!--              </p>-->
          <!--              <p @click="goFn(3)">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击此条信息查看门店。</a>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="two">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: #A0E75A;min-height: 44px;margin:0 10px;;padding: 10px;border-radius: 6px">-->
          <!--              我想邀请销量高的金牌店，参加线下订货会-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"><van-image :src="avatar" style="float: left;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;"/></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
          <!--      <div style="margin: 14px" v-if="two1">-->
          <!--        <van-row>-->
          <!--          <van-col span="4"><van-image :src="aiselect" style="float: right;background-color: #fff;    width: 44px;-->
          <!--    height: 44px;-->
          <!--    border-radius: 6px;" /></van-col>-->
          <!--          <van-col span="16">-->
          <!--            <div style="text-align: left;background-color: white;-->
          <!--    min-height: 44px;-->
          <!-- margin:0 10px;-->
          <!--    padding: 10px;border-radius: 6px">-->
          <!--              <p>-->
          <!--                已为您筛选销量前10的金牌店-->
          <!--              </p>-->
          <!--              <p @click="goFn(1)">-->
          <!--                <a style="display: block;text-decoration: underline;color:#1c84c6"  ><img src="./../../assets/Icon/clcik.png"  style="width: 20px;float: left;">请点击此条信息查看门店。</a>-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </van-col>-->
          <!--          <van-col span="4"></van-col>-->
          <!--        </van-row>-->
          <!--      </div>-->
        </div>
      </div>
      <!--    </van-list>-->
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </van-pull-refresh>
    <div style="position: fixed; bottom: 50px; left: 0; width: 100%; background-color: white">
      <van-field v-model="content" rows="1" autosize type="textarea" placeholder="请输入文字">
        <template #left-icon>
          <van-icon :name="yy" style="margin-top: 10px; padding: 0 20px" @click="showFn" />
        </template>
        <template #button>
          <van-button
            size="small"
            :disabled="!btnclik"
            type="primary"
            color="#1c84c6"
            @click="Submit"
            >发送</van-button
          >
        </template>
      </van-field>
    </div>
    <tab-bar tabBarActive="ai"></tab-bar>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div
          class="block"
          style="
            position: absolute;
            bottom: 0;
            background-color: white;
            width: 100%;
            height: 260px;
          ">
          <div class="audio" v-if="shows">
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
            <div class="wave"></div>
          </div>
          <div
            class="audioBox"
            style="
              background-color: rgb(0, 87, 186);
              left: 50%;
              width: 80px;
              height: 80px;
              border-radius: 100px;
              margin-left: -40px;
              position: absolute;
              bottom: 90px;
            ">
            <div class="tip">{{ tips }}</div>
            <div
              style="position: absolute; width: 100%; height: 80px; z-index: 999999"
              @touchstart="lujin"
              @touchend="endlujin"></div>
            <van-icon :name="yt" size="40" style="top: 20px; left: 50%; margin-left: -20px" />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import avatar from '@/assets/avatar2.png';
import yy from '@/assets/Icon/yy.png';
import yt from '@/assets/Icon/yt.png';
import aiselect from '@/assets/Icon/avatar1.png';
import tabBar from '@/components/tabBar';
import { getReportInfo } from '@/api';
import { aiDialogue } from '@/api/inventory';
import axios from 'axios';
export default {
  name: 'ai',
  components: { tabBar },
  data() {
    return {
      loading: false,
      finished: false,
      pageNum: 0,
      avatar: avatar,
      yy: yy,
      yt: yt,
      aiselect: aiselect,
      Ggreet: [{ textList: [] }],
      content: '',
      btnclik: true,
      message: '',
      num: 0,
      show: false,
      shows: false,
      one: false,
      two: false,
      one1: false,
      one9: false,
      one10: false,
      one11: false,
      one12: false,
      one14: false,
      one15: false,
      one16: false,
      one17: false,
      one18: false,
      one19: false,
      two1: false,
      dataList: [
        {
          type: 1,
          text: '厨卫店中，本月进货不满50包超好贴的门店有哪些？',
        },
        {
          type: 2,
          text: '点击此条信息进入推荐门店页面。',
        },
      ],
      isNoData: false, //是否加载完所有数据
      successText: '加载成功', //上拉刷新提示语
      tips: '按住 说话',
    };
  },
  // watch: {
  //   $route(to, from) {
  //     if (to.path == '/ai') {
  //       this.onLoad();
  //     }
  //   },
  // },
  activated() {
    this.onLoad();
  },
  methods: {
    garbageManager() {
      this.$nextTick(() => {
        this.$refs.snb.scrollTop = this.$refs.snb.scrollHeight;
      });
    },
    onLoad() {
      if (this.isNoData) {
        this.successText = '以下所有内容！';
        this.$toast('已经加载所有内容！');
        this.loading = false;
        return;
      }
      this.pageNum++;
      this.aiDialogueGgreet();
    },
    choiceSelct(val, val2) {
      if (val.type == 'AI_WIRING_SCENE') {
        localStorage.setItem(val.type, val.content);
        // 跳转高销额列表
        this.$router.push({
          path: '/topStore',
          query: {
            AItype: val.type,
          },
        });
        return;
      } else {
        let loading1 = this.$toast.loading({
          duration: 0,
          message: '发送中...',
          forbidClick: true,
        });
        aiDialogue({
          type: 4,
          content: val.radioName,
          radioIndex: val.radioIndex,
          radioActionId: val2.radioActionId,
          radioAnswerId: val.radioAnswerId,
          radioValue: val.radioValue,
          radioName: val.radioName,
        }).then((response) => {
          loading1.clear();
          if (response.code == 200) {
            this.pageNum = 1;
            this.Ggreet = [];
            this.aiDialogueGgreet();
          }
        });
      }
    },
    aiDialogueGgreet() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '发送中...',
        forbidClick: true,
      });
      aiDialogue({ type: 3, pageNum: this.pageNum, pageSize: 10 }).then((response) => {
        loading1.clear();
        this.loading = false;
        if (response.code == 200) {
          this.Ggreet = response.rows.concat(this.Ggreet);
          if (this.Ggreet.length >= response.total) {
            this.isNoData = true;
          } else {
            this.isNoData = false;
          }
          if (this.pageNum == 1) {
            this.garbageManager();
          }
        }
      });
    },
    Submit() {
      if (this.content.trim() == '') {
        this.$toast('请输入内容！');
      }
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '发送中...',
        forbidClick: true,
      });
      this.btnclik = false;
      this.Ggreet.push({
        chatRecordText: this.content,
        chatRecordFrom: 1,
      });
      aiDialogue({ type: 1, content: this.content }).then((response) => {
        loading1.clear();
        this.btnclik = true;
        if (response.code == 200) {
          this.content = '';
          // this.pageNum = 1;
          // this.Ggreet = [];
          this.Ggreet.push(...response.rows);
          // this.aiDialogueGgreet();
          this.garbageManager();
        }
      });
    },
    lujin() {
      let url = window.location.href;
      let that = this;
      let wx = this.wx;
      let qiyeData;
      const instance = axios.create();
      instance.defaults.headers.common['userId'] = localStorage.getItem('loginName');
      instance
        .get(process.env.VUE_APP_BASE_API + 'mobile/wx/ticket', {
          params: {
            url: url,
          },
        })
        .then((response) => {
          if (response.status == 200) {
            qiyeData = response.data.data;
            wx.config({
              beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: qiyeData.appId, // 必填，企业微信的corpID
              timestamp: qiyeData.timestamp, // 必填，生成签名的时间戳
              nonceStr: qiyeData.nonceStr, // 必填，生成签名的随机串
              signature: qiyeData.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
              jsApiList: ['ready', 'startRecord', 'stopRecord', 'onVoiceRecordEnd'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
            });
            wx.ready(function () {
              wx.startRecord();
              that.shows = true;
              wx.onVoiceRecordEnd({
                complete: function (res) {
                  var localId = res.localId;
                  that.shows = false;
                  wx.uploadVoice({
                    localId: localId,
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                      aiDialogue({ type: 2, content: res.serverId }).then((response) => {
                        if (response.code == 200) {
                          // that.pageNum = 1;
                          // that.Ggreet = [];
                          // that.aiDialogueGgreet();
                          this.Ggreet.push(...response.rows);
                          that.garbageManager();
                        }
                        that.show = false;
                      });
                    },
                  });
                },
              });
            });
          }
        });
    },
    endlujin() {
      let wx = this.wx;
      var that = this;
      wx.stopRecord({
        success: function (res) {
          var localId = res.localId;
          wx.uploadVoice({
            localId: localId,
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              aiDialogue({ type: 2, content: res.serverId }).then((response) => {
                if (response.code == 200) {
                  // that.pageNum = 1;
                  // that.Ggreet = [];
                  // that.aiDialogueGgreet();
                  this.Ggreet.push(...response.rows);
                  that.garbageManager();
                }
                that.shows = false;
                that.show = false;
              });
            },
          });
        },
      });
    },
    typw(val) {
      if (val == 1) {
        this.one14 = true;
        setTimeout(() => {
          this.one15 = true;
        }, 1000);
      }
      if (val == 2) {
        this.one16 = true;
        setTimeout(() => {
          this.one17 = true;
        }, 1000);
      }
      if (val == 3) {
        this.one18 = true;
        setTimeout(() => {
          this.one19 = true;
        }, 1000);
      }
    },
    send() {
      this.one = false;
      this.two = false;
      this.one1 = false;
      this.one9 = false;
      this.one10 = false;
      this.one11 = false;
      this.one12 = false;
      this.one14 = false;
      this.one15 = false;
      this.one16 = false;
      this.one17 = false;
      this.one18 = false;
      this.one19 = false;
      this.two1 = false;
      if (this.message.indexOf('销量') != -1 || this.num == 1) {
        this.one = true;
        setTimeout(() => {
          this.one1 = true;
        }, 1000);
      }
      if (this.message.indexOf('专业时时丽') != -1 || this.num == 2) {
        this.one11 = true;
        setTimeout(() => {
          this.one12 = true;
        }, 1000);
      }
      if (this.message.indexOf('碰瓷专案') != -1 || this.num == 3) {
        this.one9 = true;
        setTimeout(() => {
          this.one10 = true;
        }, 1000);
      }
      this.message = '';
    },
    showFn() {
      this.shows = false;
      this.show = true;
    },
    mousedownFN() {
      this.shows = true;
    },
    clears() {
      this.show = false;
      // this.two=true
      //
      // setTimeout(()=>{
      //   this.two1=true
      // },1000)
      this.one = false;
      this.two = false;
      this.one1 = false;
      this.one9 = false;
      this.one10 = false;
      this.one11 = false;
      this.one12 = false;
      this.one14 = false;
      this.one15 = false;
      this.one16 = false;
      this.one17 = false;
      this.one18 = false;
      this.one19 = false;
      this.two1 = false;
    },
    mouseupfN() {
      this.show = false;
      // this.two=true
      //
      // setTimeout(()=>{
      //   this.two1=true
      // },1000)
      this.one = false;
      this.two = false;
      this.one1 = false;
      this.one9 = false;
      this.one10 = false;
      this.one11 = false;
      this.one12 = false;
      this.one14 = false;
      this.one15 = false;
      this.one16 = false;
      this.one17 = false;
      this.one18 = false;
      this.one19 = false;
      this.two1 = false;
      if (this.num > 2) {
        this.num = 0;
      }
      this.num = this.num + 1;
      this.send();
    },
    goFn(row) {
      this.$router.push({
        path: '/aipage',
        query: { type: row },
      });
    },
    getReportInfo() {
      this.deptLevel = localStorage.getItem('deptLevel');
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getReportInfo({ isContent: false }).then((res) => {
        loading1.clear();
        this.list = res.data.summaryTasks;
        this.historyButton = res.data.historyButton;
        localStorage.setItem('powerGrade', res.data.positionId);
        this.existReject = res.data.existReject;
        this.powerGrade = res.data.positionId;
        this.showButton = res.data.showButton;
        this.deptLevel = res.data.deptLevel;
        this.reportTargetAll = res.data.reportTargetAll;
        this.updataTime = res.data.reportTargetAll.updateTime;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 22px;
}
.audio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 60px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 86px;
  margin-left: -34px;
  .wave {
    height: 40px;
    display: block;
    width: 10px;
    height: 6px;
    border-radius: 8px;
    background: orange;
  }
}
.audio {
  .wave {
    animation: audio-wave 2s ease-in-out infinite;

    &:nth-child(1) {
      animation-delay: 0.1s;
    }

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.3s;
    }

    &:nth-child(4) {
      animation-delay: 0.4s;
    }

    &:nth-child(5) {
      animation-delay: 0.5s;
    }
  }
}

@keyframes audio-wave {
  0% {
    height: 6px;
    transform: translateY(0px);
    background: #ff8e3a;
  }

  25% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }

  50% {
    height: 30px;
    transform: translateY(-5px) scaleY(1.5);
    background: #ed509e;
  }

  75% {
    height: 6px;
    transform: translateY(0px);
    background: #9c73f8;
  }

  100% {
    height: 6px;
    transform: translateY(0px);
    background: #0fccce;
  }
}
.pageya {
  overflow-y: auto;
  height: 700px;
}
.wrapper {
  .audioBox {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .tip {
      position: absolute;
      top: -26px;
      display: flex;
      width: 100%;
      justify-content: center;
      font-size: 14px;
    }
  }
}
</style>