fix: 样式调整

package.json

@@ -78,7 +78,8 @@
     "vuex": "3.1.0",
     "wangeditor": "^4.7.11",
     "webpack": "^4.47.0",
-    "xlsx": "^0.14.1"
+    "xlsx": "^0.14.1",
+    "postcss-pxtorem": "^5.1.1"
   },
   "devDependencies": {
     "@babel/parser": "^7.7.4",

postcss.config.js

@@ -1,5 +1,19 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    autoprefixer: {},
+    "postcss-pxtorem": {
+      // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
+      rootValue({ file }) {
+        return 192;
+      },
+      // 配置的文件尺寸需要转化为rem *表示所有的都要转化
+      // 需要转换的css属性，默认*全部
+      propList: ["*"],
+      exclude: e => {
+        if (!/src(\\|\/)views(\\|\/)largeScreen/.test(e)) {
+          return true;
+        }
+      }
+    }
   }
-}
+};

src/views/largeScreen/index.vue

@@ -7,7 +7,9 @@
         alt=""
       />结束直播
     </div>
-    <h1 class="title"><span>{{ viewData.title }}</span></h1>
+    <h1 class="title">
+      <span>{{ viewData.title }}</span>
+    </h1>
     <div class="content">
       <div class="left">
         <div class="user-share">
@@ -228,7 +230,7 @@ import {
   getLiveMapConfig,
   showFields
 } from "./config";
-import { clientTypeObj } from "@/utils/options"
+import { clientTypeObj } from "@/utils/options";
 export default {
   data() {
     return {
@@ -256,7 +258,7 @@ export default {
       liveMapChart: null,
       timer: null,
       detail: {},
-      allData:{}
+      allData: {}
     };
   },
   async mounted() {
@@ -274,8 +276,8 @@ export default {
     //   window.close(); // 可选：关闭当前页面
     // }
     this.videoId = this.$route.query.videoId;
-    let ret = await this.getDetail()
+    const ret = await this.getDetail();
-    if(!ret)return
+    if (!ret) return;
     window.addEventListener("resize", this.resizeFn);
     this.initData();
     //观众来源写死
@@ -324,22 +326,26 @@ export default {
   },
   methods: {
     async getDetail() {
-      let res = await infoGet({ id: this.videoId })
+      const res = await infoGet({ id: this.videoId });
-      if(res && res.code === 0) {
+      if (res && res.code === 0) {
-        this.detail = res.data
+        this.detail = res.data;
-        if(this.detail.advisorBasic.deptName !== this.$store.state.user.user.user.deptName && this.$store.state.user.user.user.deptId !== '1') {
+        if (
+          this.detail.advisorBasic.deptName !==
+            this.$store.state.user.user.user.deptName &&
+          this.$store.state.user.user.user.deptId !== "1"
+        ) {
           // 不是一个部门的不让查看 总部的可以查看所有
-          this.$alert('暂无查看权限！', '', {
+          this.$alert("暂无查看权限！", "", {
-            confirmButtonText: '确定',
+            confirmButtonText: "确定",
             callback: action => {
-              window.close()
+              window.close();
             }
           });
-          return false
+          return false;
         }
-        return true
+        return true;
       }
-      return false
+      return false;
     },
     resizeFn() {
       this.$nextTick(() => {
@@ -351,8 +357,8 @@ export default {
       });
     },
     async initData() {
-      let { code, data } = await liveScreen({ videoId: this.videoId });
+      const { code, data } = await liveScreen({ videoId: this.videoId });
-      if(code == 0 && data){
+      if (code == 0 && data) {
         this.allData = data;
         this.setUserShare();
         // this.setUserSource();
@@ -361,8 +367,6 @@ export default {
         this.setOnlinePeople();
         this.setVolumeTransaction();
         this.setLiveMap();
-      }else{
-
       }
     },
     // 用户占比
@@ -410,13 +414,15 @@ export default {
         this.userSourceChart = echarts.init(this.$refs["userSourceRef"]);
       }
       const config = userSourceConfig;
-      const { code, data } = await queryUserClientType({videoId: this.$route.query.videoId})
+      const { code, data } = await queryUserClientType({
+        videoId: this.$route.query.videoId
+      });
 
       if (code == 0 && data) {
         config.title.show = false;
-        let allNum = 0
+        let allNum = 0;
         const seriesData = data.map(item => {
-          allNum+=item.count
+          allNum += item.count;
           return {
             value: item.count,
             name: clientTypeObj[item.clientType]
@@ -435,7 +441,7 @@ export default {
             "",
             "…",
             {}
-          )}}{v|${parseFloat(v/allNum * 100).toFixed(2)}%}`;
+          )}}{v|${parseFloat((v / allNum) * 100).toFixed(2)}%}`;
         };
         config.series[0].data = seriesData;
       } else {
@@ -481,7 +487,9 @@ export default {
       // let { code, data } = await nowTrend({ videoId: this.videoId });
       if (this.allData.videoLiveTrendVOS) {
         config.title.show = false;
-        const xData = this.allData.videoLiveTrendVOS.map(item => item.time.split(" ")[1]);
+        const xData = this.allData.videoLiveTrendVOS.map(
+          item => item.time.split(" ")[1]
+        );
         config.xAxis.axisLabel.interval = parseInt(
           xData.length / (xData.length % 2 == 0 ? 2 : 3)
         );
@@ -498,9 +506,15 @@ export default {
             }
           };
         });
-        config.series[0].data = this.allData.videoLiveTrendVOS.map(item => item.onlineNum);
+        config.series[0].data = this.allData.videoLiveTrendVOS.map(
-        config.series[1].data = this.allData.videoLiveTrendVOS.map(item => item.attendNum);
+          item => item.onlineNum
-        config.series[2].data = this.allData.videoLiveTrendVOS.map(item => item.leaveNum);
+        );
+        config.series[1].data = this.allData.videoLiveTrendVOS.map(
+          item => item.attendNum
+        );
+        config.series[2].data = this.allData.videoLiveTrendVOS.map(
+          item => item.leaveNum
+        );
       } else {
         config.title.show = true;
         config.series[0].data = [];
@@ -521,11 +535,19 @@ export default {
         // const { code, data } = await productSaleLine({
         //   videoId: this.videoId
         // });
-        this.allData.videoProductSaleLineVOS = this.allData.videoProductSaleLineVOS.sort((x,y)=>{return (new Date(x.time).getTime()-new Date(y.time).getTime())})
+        this.allData.videoProductSaleLineVOS = this.allData.videoProductSaleLineVOS.sort(
+          (x, y) => {
+            return new Date(x.time).getTime() - new Date(y.time).getTime();
+          }
+        );
         if (this.allData.videoProductSaleLineVOS) {
-          const xData = this.allData.videoProductSaleLineVOS.map(item => item.time);
+          const xData = this.allData.videoProductSaleLineVOS.map(
+            item => item.time
+          );
           config.title.show = false;
-          config.series[0].data = this.allData.videoProductSaleLineVOS.map(item => item.amount / 100);
+          config.series[0].data = this.allData.videoProductSaleLineVOS.map(
+            item => item.amount / 100
+          );
           config.xAxis.data = xData.map((item, index) => {
             return {
               value: item,
@@ -560,10 +582,12 @@ export default {
 
       // const { code, data } = await userProvince({ videoId: this.videoId });
       if (this.allData.videoUserProvinceVOS) {
-        this.userProvinceData = this.allData.videoUserProvinceVOS.sort((x,y)=>y.num-x.num);
+        this.userProvinceData = this.allData.videoUserProvinceVOS.sort(
+          (x, y) => y.num - x.num
+        );
         const seriesData = this.allData.videoUserProvinceVOS.map(item => {
           return {
-            name: item.provinceName.replace(/市|省/,''),
+            name: item.provinceName.replace(/市|省/, ""),
             value: item.num,
             proportion: item.proportion
           };
@@ -601,7 +625,7 @@ export default {
   beforeDestroy() {
     window.removeEventListener("resize", this.resizeFn);
     if (this.timer) clearInterval(this.timer);
-  },
+  }
   // destroyed() {  //进行监听销毁
   //   localStorage.removeItem('pageOpened'); // 确保标志位被清除
   // },
@@ -650,7 +674,8 @@ h1 {
   padding: 0;
   width: 100vw;
   height: 100vh;
-  background: url("~@/assets/images/largeScreen/ls-bg.png") no-repeat;
+  // background: url("~@/assets/images/largeScreen/ls-bg.png") no-repeat;
+  background: #101d4a;
   background-size: 100% 100%;
   overflow: hidden;
   .title {
@@ -672,7 +697,7 @@ h1 {
     // overflow: hidden;
     width: 100%;
     height: 55px;
-    span{
+    span {
       width: 27%;
       text-align: center;
       word-break: break-all;
@@ -682,11 +707,10 @@ h1 {
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
   }
   .content {
     display: flex;
-    padding: 20px 80px 0 80px;
+    padding: 20px 20px 0 20px;
     height: 92%;
     margin-top: -2%;
     .left,
@@ -798,7 +822,7 @@ h1 {
             > div:last-of-type {
               flex-shrink: 0;
             }
-            > div:first-child{
+            > div:first-child {
               width: 60px;
               flex: none;
             }

src/views/liveBroadcast/list/index.vue

@@ -265,7 +265,7 @@
               "
               type="text"
               @click="toDateDetail(scope.row)"
-              >数据大屏</el-button
+              >实时大屏</el-button
             >
             <el-button
               v-if="[1, 4].includes(scope.row.status)"

src/views/liveBroadcast/list/indexZj.vue

@@ -265,7 +265,7 @@
               "
               type="text"
               @click="toDateDetail(scope.row)"
-              >数据大屏</el-button
+              >实时大屏</el-button
             >
             <el-button
               v-if="[1, 4].includes(scope.row.status)"

src/views/liveBroadcast/liveDetail/index.vue

@@ -41,6 +41,403 @@
       />
     </div>
     <div class="content">
+      <div ref="videoBox" class="video-box">
+        <div class="video-box-top">
+          <!-- :class="{ 'sticky': isSticky }" :style="{'width': isSticky ? `${divWidth}px`:'100%'}" -->
+          <div
+            v-if="
+              (renderPlayer && renderStatus == 'living-player') ||
+                renderStatus == 'back-player'
+            "
+            ref="videoPlayer"
+            class="w-full h-full"
+          />
+          <div v-else-if="renderStatus == 'before-img' || pullBuffer">
+            <img style="height:600px;width:100%;" :src="beforeImgUrl" />
+          </div>
+          <div
+            v-else-if="renderStatus == 'suspend-player' || !renderStatus"
+            class="suspend"
+          >
+            <img src="@/assets/logo/wait.png" class="user-avatar" />
+            <p>主播离开一会儿，请耐心等待~</p>
+          </div>
+          <div v-if="![5].includes(type)" class="video-box-bottom">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <!-- <el-tab-pane label="聊天" name="1"></el-tab-pane>
+            <el-tab-pane v-if="detail.liveStatus !== 4 " label="互动设置" name="2"></el-tab-pane> -->
+              <el-tab-pane
+                v-if="[1, 2, 4].includes(type)"
+                label="购物车"
+                name="3"
+              />
+              <!-- <el-tab-pane
+                v-if="[1, 2, 4].includes(type)"
+                label="发优惠券"
+                name="4"
+              /> -->
+              <el-tab-pane
+                v-if="[1, 2, 4].includes(type)"
+                label="问卷"
+                name="5"
+              />
+              <!-- <el-tab-pane
+                v-if="[1, 2, 4].includes(type)"
+                label="营销二维码"
+                name="6"
+              /> -->
+              <!-- <el-tab-pane
+                v-if="[1, 2, 4].includes(type) && detail.playType === 1"
+                label="转播设置"
+                name="7"
+              /> -->
+              <el-tab-pane
+                v-if="[1, 2, 4].includes(type)"
+                label="嘉宾设置"
+                name="8"
+              />
+            </el-tabs>
+
+            <!-- 互动设置 -->
+            <div v-if="activeName === '2'" class="interaction-box">
+              <div class="interaction-box_switch">
+                开放观众发言
+                <el-switch
+                  v-model="isSpeak"
+                  :inactive-value="2"
+                  :active-value="1"
+                  @change="setUp()"
+                />
+                <el-checkbox
+                  v-model="isSendMessage"
+                  :true-label="1"
+                  :false-label="2"
+                  >在聊天框中发送禁言/开启发言通知</el-checkbox
+                >
+              </div>
+              <div class="interaction-box_switch">
+                开启审核
+                <el-switch
+                  v-model="messageAudit"
+                  :inactive-value="2"
+                  :active-value="1"
+                  @change="setUpTwo()"
+                />
+              </div>
+              <!-- <el-button type="success" @click="" :disabled="isSpeak === detail.isSpeak && messageAudit === detail.messageAudit">保存设置</el-button> -->
+            </div>
+            <!-- 购物车 -->
+            <div v-if="activeName === '3'" class="shopping-box">
+              <div class="shop-header">
+                <p>
+                  产品列表 （说明：产品列表中仅展示申请上架直播时{{
+                    settingToC ? "配置" : "选择"
+                  }}的产品）
+                </p>
+                <div v-if="[1, 2, 4].includes(type)">
+                  <el-button
+                    type="success"
+                    size="mini"
+                    @click="cancelPushProduct"
+                    >取消推送产品</el-button
+                  >
+                </div>
+              </div>
+              <el-table
+                key="cartVOList"
+                :data="detail.cartVOList"
+                border
+                style="width: 100%"
+              >
+                <el-table-column
+                  prop="productType"
+                  label="产品类型"
+                  width="180"
+                >
+                  <template slot-scope="scope">
+                    {{ productTypeList[scope.row.productType] }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="productName"
+                  label="产品名称"
+                  width="180"
+                />
+                <el-table-column prop="address" label="投顾名称">
+                  <template slot-scope="scope">
+                    {{
+                      scope.row.advisorBasic
+                        ? scope.row.advisorBasic.showName
+                        : ""
+                    }}
+                  </template>
+                </el-table-column>
+                <!-- <el-table-column prop="subCount" label="产品订阅数">
+              </el-table-column> -->
+                <el-table-column prop="saleLimit" label="可销售数量">
+                  <template slot-scope="scope">
+                    {{
+                      scope.row.saleLimit === null ? "" : scope.row.saleLimit
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  v-if="[1, 2, 4].includes(type)"
+                  label="操作"
+                  fixed="right"
+                  width="160px"
+                >
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="scope.row.status === 1"
+                      type="text"
+                      @click="updateStatus(scope.row, 4)"
+                      >下架产品</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.status === 1 && !settingToC"
+                      type="text"
+                      @click="updateStatus(scope.row, 9)"
+                      >修改可销售数量</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.status === 1 && !scope.row.weight"
+                      type="text"
+                      @click="updateStatus(scope.row, 10)"
+                      >推荐</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.status === 1 && scope.row.weight"
+                      type="text"
+                      @click="updateStatus(scope.row, 11)"
+                      >取消推荐</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.status === 2"
+                      type="text"
+                      @click="updateStatus(scope.row, 3)"
+                      >上架产品</el-button
+                    >
+                    <el-button
+                      v-if="scope.row.coverImgUrl"
+                      type="text"
+                      @click="setCartPush(scope.row)"
+                      >推送产品</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <p v-if="[1, 2, 4].includes(type)" style="text-align: right;">
+                （此处的上下架产品仅控制是否在购物车列表展示）
+              </p>
+            </div>
+            <!-- 发优惠券  && detail.liveStatus !== 4 -->
+            <div v-if="activeName === '4'" class="preferential-box">
+              <el-button
+                v-if="
+                  [1, 2, 4].includes(type) &&
+                    detail.liveStatus !== 4 &&
+                    detail.playType === 1
+                "
+                type="primary"
+                @click="toOpenCoupon()"
+                >添加优惠券</el-button
+              >
+              <createCoupon ref="coupon" @child-event="queryListPreferential" />
+              <div class="table-box">
+                <p>发放记录</p>
+                <el-table
+                  key="preferentialData"
+                  :data="preferentialData"
+                  border
+                  style="width: 100%"
+                >
+                  <el-table-column type="index" label="序号" width="100" />
+                  <el-table-column
+                    prop="couponId"
+                    label="优惠券ID"
+                    width="180"
+                  />
+                  <el-table-column prop="name" label="优惠券名称" />
+                  <el-table-column prop="couponType" label="优惠券类型">
+                    <template slot-scope="scope">
+                      {{ couponTypeList[scope.row.couponType] }}
+                    </template>
+                  </el-table-column>
+                  <!-- <el-table-column prop="uTime" label="用券时间">
+                </el-table-column> -->
+                  <el-table-column label="领取要求">
+                    <template slot-scope="scope">
+                      {{ receiveRequirementList[scope.row.receiveRequirement] }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="sendTotalNumber" label="发放数量" />
+                  <el-table-column prop="sendGottenNumber" label="已领取数量" />
+                  <el-table-column prop="sendUsedNumber" label="已用数量" />
+                  <el-table-column prop="cTime" label="发放时间" />
+                  <el-table-column prop="state" label="状态">
+                    <template slot-scope="scope">
+                      {{ stateList[scope.row.state] }}
+                    </template>
+                  </el-table-column>
+
+                  <el-table-column
+                    v-if="detail.liveStatus !== 4"
+                    label="操作"
+                    fixed="right"
+                  >
+                    <template slot-scope="scope">
+                      <el-button
+                        v-if="[1].includes(scope.row.state)"
+                        type="text"
+                        @click="sendcoupon(scope.row, 1)"
+                        >发放</el-button
+                      >
+                      <el-button
+                        v-if="[1].includes(scope.row.state)"
+                        type="text"
+                        @click="sendcoupon(scope.row, 2)"
+                        >删除</el-button
+                      >
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <!--分页组件-->
+                <el-pagination
+                  :total="queryParamsPreferential.total"
+                  :current-page="queryParamsPreferential.current"
+                  :page-size="queryParamsPreferential.size"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  @size-change="handleSizeChangePreferential"
+                  @current-change="handleCurrentChangePreferential"
+                />
+              </div>
+            </div>
+            <!-- 问卷 -->
+            <div v-if="activeName === '5'" class="questionnaire-box">
+              <el-button
+                v-if="detail.liveStatus !== 4 && detail.playType === 1"
+                type="primary"
+                style="margin-bottom:50px;"
+                @click="createQuestionnaire"
+                >创建问卷</el-button
+              >
+              <el-table
+                key="questionnaireList"
+                :data="questionnaireList"
+                fit
+                highlight-current-row
+                border
+                style="width: 100%;"
+                :header-cell-style="{ 'text-align': 'center' }"
+                :cell-style="{ 'text-align': 'center' }"
+              >
+                <el-table-column type="index" label="序号" width="100" />
+                <el-table-column prop="title" label="问卷名称" width="200">
+                  <template slot-scope="scope">
+                    <span
+                      class="button-text"
+                      type="text"
+                      @click="openView(scope.row)"
+                      >{{ scope.row.title }}</span
+                    >
+                  </template>
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建时间" width="200">
+                  <template slot-scope="scope">
+                    {{ scope.row.createTime }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="startTime"
+                  label="发起时间"
+                  width="200"
+                />
+                <el-table-column prop="writeNum" label="填写人数" width="100" />
+                <el-table-column prop="status" label="状态" width="100">
+                  <template slot-scope="scope">
+                    {{ questionnaireStatusList[scope.row.status] }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" fixed="right">
+                  <template slot-scope="scope">
+                    <el-button
+                      v-if="[1].includes(scope.row.status) && operate !== 1"
+                      type="text"
+                      @click="question(scope.row, -1)"
+                      >发起问卷</el-button
+                    >
+                    <el-button
+                      v-if="[1].includes(scope.row.status)"
+                      type="text"
+                      @click="updateQuestion(scope.row, 1)"
+                      >编辑</el-button
+                    >
+                    <el-button
+                      v-if="[1, 2].includes(scope.row.status)"
+                      type="text"
+                      @click="updateQuestion(scope.row, 2)"
+                      >复制</el-button
+                    >
+                    <el-button
+                      v-if="[1, 2, 3].includes(scope.row.status)"
+                      type="text"
+                      @click="question(scope.row, -2)"
+                      >删除</el-button
+                    >
+                    <el-button
+                      v-if="[2].includes(scope.row.status) && operate !== 1"
+                      type="text"
+                      @click="question(scope.row, -3)"
+                      >重发至互动区</el-button
+                    >
+                    <el-button
+                      v-if="
+                        [2, 3].includes(scope.row.status) && scope.row.writeNum
+                      "
+                      type="text"
+                      @click="toExport(scope.row)"
+                      >导出数据</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!--分页组件-->
+              <el-pagination
+                style="margin-top:10px;"
+                :total="queryParamsQuestionnaire.total"
+                :current-page="queryParamsQuestionnaire.current"
+                :page-size="queryParamsQuestionnaire.size"
+                layout="total, sizes, prev, pager, next, jumper"
+                @size-change="handleSizeChangeQuestionnaire"
+                @current-change="handleCurrentChangeQuestionnaire"
+              />
+            </div>
+            <div v-if="activeName === '6'">
+              <div class="marketing-code">
+                <label>展示营销二维码</label>
+                <el-switch
+                  v-model="detail.openQw"
+                  :active-value="1"
+                  :inactive-value="2"
+                  @change="changeOpenQw"
+                />
+              </div>
+            </div>
+            <div v-if="activeName === '7'">
+              <rebroadcast
+                :push-list="detail.pushList"
+                :live-status="detail.liveStatus"
+                :type="type"
+                @addPush="addPush"
+              />
+            </div>
+            <div v-if="activeName === '8'">
+              <guestList :live-status="detail.liveStatus" />
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="audience">
         <div class="audience-border">
           <div class="box-tab">
@@ -502,429 +899,6 @@
           </div>
         </div>
       </div>
-      <div ref="videoBox" class="video-box">
-        <div class="video-box-top">
-          <!-- :class="{ 'sticky': isSticky }" :style="{'width': isSticky ? `${divWidth}px`:'100%'}" -->
-          <div
-            v-if="
-              (renderPlayer && renderStatus == 'living-player') ||
-                renderStatus == 'back-player'
-            "
-            ref="videoPlayer"
-            class="w-full h-full"
-          />
-          <div v-else-if="renderStatus == 'before-img' || pullBuffer">
-            <img style="height:600px;width:100%;" :src="beforeImgUrl" />
-          </div>
-          <div
-            v-else-if="renderStatus == 'suspend-player' || !renderStatus"
-            class="suspend"
-          >
-            <img src="@/assets/logo/wait.png" class="user-avatar" />
-            <p>主播离开一会儿，请耐心等待~</p>
-          </div>
-          <div v-if="![5].includes(type)" class="video-box-bottom">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <!-- <el-tab-pane label="聊天" name="1"></el-tab-pane>
-            <el-tab-pane v-if="detail.liveStatus !== 4 " label="互动设置" name="2"></el-tab-pane> -->
-              <el-tab-pane
-                v-if="[1, 2, 4].includes(type)"
-                label="购物车"
-                name="3"
-              />
-              <!-- <el-tab-pane
-                v-if="[1, 2, 4].includes(type)"
-                label="发优惠券"
-                name="4"
-              /> -->
-              <el-tab-pane
-                v-if="[1, 2, 4].includes(type)"
-                label="问卷"
-                name="5"
-              />
-              <!-- <el-tab-pane
-                v-if="[1, 2, 4].includes(type)"
-                label="营销二维码"
-                name="6"
-              /> -->
-              <!-- <el-tab-pane
-                v-if="[1, 2, 4].includes(type) && detail.playType === 1"
-                label="转播设置"
-                name="7"
-              /> -->
-              <el-tab-pane
-                v-if="[1, 2, 4].includes(type)"
-                label="嘉宾设置"
-                name="8"
-              />
-            </el-tabs>
-
-            <!-- 互动设置 -->
-            <div v-if="activeName === '2'" class="interaction-box">
-              <div class="interaction-box_switch">
-                开放观众发言
-                <el-switch
-                  v-model="isSpeak"
-                  :inactive-value="2"
-                  :active-value="1"
-                  @change="setUp()"
-                />
-                <el-checkbox
-                  v-model="isSendMessage"
-                  :true-label="1"
-                  :false-label="2"
-                  >在聊天框中发送禁言/开启发言通知</el-checkbox
-                >
-              </div>
-              <div class="interaction-box_switch">
-                开启审核
-                <el-switch
-                  v-model="messageAudit"
-                  :inactive-value="2"
-                  :active-value="1"
-                  @change="setUpTwo()"
-                />
-              </div>
-              <!-- <el-button type="success" @click="" :disabled="isSpeak === detail.isSpeak && messageAudit === detail.messageAudit">保存设置</el-button> -->
-            </div>
-            <!-- 购物车 -->
-            <div v-if="activeName === '3'" class="shopping-box">
-              <div class="shop-header">
-                <p>
-                  产品列表 （说明：产品列表中仅展示申请上架直播时{{
-                    settingToC ? "配置" : "选择"
-                  }}的产品）
-                </p>
-                <div v-if="[1, 2, 4].includes(type)">
-                  <el-button
-                    type="success"
-                    size="mini"
-                    @click="cancelPushProduct"
-                    >取消推送产品</el-button
-                  >
-                </div>
-              </div>
-              <el-table
-                key="cartVOList"
-                :data="detail.cartVOList"
-                border
-                style="width: 100%"
-              >
-                <el-table-column
-                  prop="productType"
-                  label="产品类型"
-                  width="180"
-                >
-                  <template slot-scope="scope">
-                    {{ productTypeList[scope.row.productType] }}
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="productName"
-                  label="产品名称"
-                  width="180"
-                />
-                <el-table-column prop="address" label="投顾名称">
-                  <template slot-scope="scope">
-                    {{
-                      scope.row.advisorBasic
-                        ? scope.row.advisorBasic.showName
-                        : ""
-                    }}
-                  </template>
-                </el-table-column>
-                <!-- <el-table-column prop="subCount" label="产品订阅数">
-              </el-table-column> -->
-                <el-table-column prop="saleLimit" label="可销售数量">
-                  <template slot-scope="scope">
-                    {{
-                      scope.row.saleLimit === null ? "" : scope.row.saleLimit
-                    }}
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  v-if="[1, 2, 4].includes(type)"
-                  label="操作"
-                  fixed="right"
-                  width="160px"
-                >
-                  <template slot-scope="scope">
-                    <el-button
-                      v-if="scope.row.status === 1"
-                      type="text"
-                      @click="updateStatus(scope.row, 4)"
-                      >下架产品</el-button
-                    >
-                    <el-button
-                      v-if="scope.row.status === 1 && !settingToC"
-                      type="text"
-                      @click="updateStatus(scope.row, 9)"
-                      >修改可销售数量</el-button
-                    >
-                    <el-button
-                      v-if="scope.row.status === 1 && !scope.row.weight"
-                      type="text"
-                      @click="updateStatus(scope.row, 10)"
-                      >推荐</el-button
-                    >
-                    <el-button
-                      v-if="scope.row.status === 1 && scope.row.weight"
-                      type="text"
-                      @click="updateStatus(scope.row, 11)"
-                      >取消推荐</el-button
-                    >
-                    <el-button
-                      v-if="scope.row.status === 2"
-                      type="text"
-                      @click="updateStatus(scope.row, 3)"
-                      >上架产品</el-button
-                    >
-                    <el-button
-                      v-if="scope.row.coverImgUrl"
-                      type="text"
-                      @click="setCartPush(scope.row)"
-                      >推送产品</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <p v-if="[1, 2, 4].includes(type)" style="text-align: right;">
-                （此处的上下架产品仅控制是否在购物车列表展示）
-              </p>
-            </div>
-            <!-- 发优惠券  && detail.liveStatus !== 4 -->
-            <div v-if="activeName === '4'" class="preferential-box">
-              <el-button
-                v-if="
-                  [1, 2, 4].includes(type) &&
-                    detail.liveStatus !== 4 &&
-                    detail.playType === 1
-                "
-                type="primary"
-                @click="toOpenCoupon()"
-                >添加优惠券</el-button
-              >
-              <createCoupon ref="coupon" @child-event="queryListPreferential" />
-              <!-- <el-form v-if="detail.liveStatus !== 4" ref="form" :model="formPreferential">
-              <el-form-item label="选择优惠券">
-                <el-select v-model="formPreferential.couponId" filterable placeholder="请选择优惠券">
-                  <el-option
-                        v-for="(item,index) in couponList"
-                        :key="index"
-                        :label="item.name"
-                        :value="item.couponId"
->
-                        </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="发放数量">
-                <el-input-number v-model="formPreferential.sendTotalNumber" :step="1" :precision="0" :min="0" :max="100"  label="请输入发放数量"></el-input-number>
-              </el-form-item>
-              <el-form-item label="领取要求">
-                <el-radio-group v-model="formPreferential.receiveRequirement">
-                  <el-radio :label="0">无要求</el-radio>
-                  <el-radio :label="1">关注主播</el-radio>
-                  <el-radio :label="2">评论互动</el-radio>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit()">发 放</el-button>
-              </el-form-item>
-            </el-form> -->
-              <div class="table-box">
-                <p>发放记录</p>
-                <el-table
-                  key="preferentialData"
-                  :data="preferentialData"
-                  border
-                  style="width: 100%"
-                >
-                  <el-table-column type="index" label="序号" width="100" />
-                  <el-table-column
-                    prop="couponId"
-                    label="优惠券ID"
-                    width="180"
-                  />
-                  <el-table-column prop="name" label="优惠券名称" />
-                  <el-table-column prop="couponType" label="优惠券类型">
-                    <template slot-scope="scope">
-                      {{ couponTypeList[scope.row.couponType] }}
-                    </template>
-                  </el-table-column>
-                  <!-- <el-table-column prop="uTime" label="用券时间">
-                </el-table-column> -->
-                  <el-table-column label="领取要求">
-                    <template slot-scope="scope">
-                      {{ receiveRequirementList[scope.row.receiveRequirement] }}
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="sendTotalNumber" label="发放数量" />
-                  <el-table-column prop="sendGottenNumber" label="已领取数量" />
-                  <el-table-column prop="sendUsedNumber" label="已用数量" />
-                  <el-table-column prop="cTime" label="发放时间" />
-                  <el-table-column prop="state" label="状态">
-                    <template slot-scope="scope">
-                      {{ stateList[scope.row.state] }}
-                    </template>
-                  </el-table-column>
-
-                  <el-table-column
-                    v-if="detail.liveStatus !== 4"
-                    label="操作"
-                    fixed="right"
-                  >
-                    <template slot-scope="scope">
-                      <el-button
-                        v-if="[1].includes(scope.row.state)"
-                        type="text"
-                        @click="sendcoupon(scope.row, 1)"
-                        >发放</el-button
-                      >
-                      <el-button
-                        v-if="[1].includes(scope.row.state)"
-                        type="text"
-                        @click="sendcoupon(scope.row, 2)"
-                        >删除</el-button
-                      >
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <!--分页组件-->
-                <el-pagination
-                  :total="queryParamsPreferential.total"
-                  :current-page="queryParamsPreferential.current"
-                  :page-size="queryParamsPreferential.size"
-                  layout="total, sizes, prev, pager, next, jumper"
-                  @size-change="handleSizeChangePreferential"
-                  @current-change="handleCurrentChangePreferential"
-                />
-              </div>
-            </div>
-            <!-- 问卷 -->
-            <div v-if="activeName === '5'" class="questionnaire-box">
-              <el-button
-                v-if="detail.liveStatus !== 4 && detail.playType === 1"
-                type="primary"
-                style="margin-bottom:50px;"
-                @click="createQuestionnaire"
-                >创建问卷</el-button
-              >
-              <el-table
-                key="questionnaireList"
-                :data="questionnaireList"
-                fit
-                highlight-current-row
-                border
-                style="width: 100%;"
-                :header-cell-style="{ 'text-align': 'center' }"
-                :cell-style="{ 'text-align': 'center' }"
-              >
-                <el-table-column type="index" label="序号" width="100" />
-                <el-table-column prop="title" label="问卷名称" width="200">
-                  <template slot-scope="scope">
-                    <span
-                      class="button-text"
-                      type="text"
-                      @click="openView(scope.row)"
-                      >{{ scope.row.title }}</span
-                    >
-                  </template>
-                </el-table-column>
-                <el-table-column prop="createTime" label="创建时间" width="200">
-                  <template slot-scope="scope">
-                    {{ scope.row.createTime }}
-                  </template>
-                </el-table-column>
-                <el-table-column
-                  prop="startTime"
-                  label="发起时间"
-                  width="200"
-                />
-                <el-table-column prop="writeNum" label="填写人数" width="100" />
-                <el-table-column prop="status" label="状态" width="100">
-                  <template slot-scope="scope">
-                    {{ questionnaireStatusList[scope.row.status] }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" fixed="right">
-                  <template slot-scope="scope">
-                    <el-button
-                      v-if="[1].includes(scope.row.status) && operate !== 1"
-                      type="text"
-                      @click="question(scope.row, -1)"
-                      >发起问卷</el-button
-                    >
-                    <el-button
-                      v-if="[1].includes(scope.row.status)"
-                      type="text"
-                      @click="updateQuestion(scope.row, 1)"
-                      >编辑</el-button
-                    >
-                    <el-button
-                      v-if="[1, 2].includes(scope.row.status)"
-                      type="text"
-                      @click="updateQuestion(scope.row, 2)"
-                      >复制</el-button
-                    >
-                    <el-button
-                      v-if="[1, 2, 3].includes(scope.row.status)"
-                      type="text"
-                      @click="question(scope.row, -2)"
-                      >删除</el-button
-                    >
-                    <el-button
-                      v-if="[2].includes(scope.row.status) && operate !== 1"
-                      type="text"
-                      @click="question(scope.row, -3)"
-                      >重发至互动区</el-button
-                    >
-                    <el-button
-                      v-if="
-                        [2, 3].includes(scope.row.status) && scope.row.writeNum
-                      "
-                      type="text"
-                      @click="toExport(scope.row)"
-                      >导出数据</el-button
-                    >
-                  </template>
-                </el-table-column>
-              </el-table>
-              <!--分页组件-->
-              <el-pagination
-                style="margin-top:10px;"
-                :total="queryParamsQuestionnaire.total"
-                :current-page="queryParamsQuestionnaire.current"
-                :page-size="queryParamsQuestionnaire.size"
-                layout="total, sizes, prev, pager, next, jumper"
-                @size-change="handleSizeChangeQuestionnaire"
-                @current-change="handleCurrentChangeQuestionnaire"
-              />
-            </div>
-            <div v-if="activeName === '6'">
-              <div class="marketing-code">
-                <label>展示营销二维码</label>
-                <el-switch
-                  v-model="detail.openQw"
-                  :active-value="1"
-                  :inactive-value="2"
-                  @change="changeOpenQw"
-                />
-              </div>
-            </div>
-            <div v-if="activeName === '7'">
-              <rebroadcast
-                :push-list="detail.pushList"
-                :live-status="detail.liveStatus"
-                :type="type"
-                @addPush="addPush"
-              />
-            </div>
-            <div v-if="activeName === '8'">
-              <guestList :live-status="detail.liveStatus" />
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
     <!-- 禁言弹窗 -->
     <el-dialog

src/views/liveBroadcast/manage/components/detail.vue

@@ -1276,21 +1276,21 @@ export default {
       }
     }
     .trapezoid1 {
-      border-top: 100px solid #5583f7;
+      border-top: 100px solid #5a8af6;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 440px;
       line-height: 100px;
     }
     .trapezoid2 {
-      border-top: 100px solid #8400ff;
+      border-top: 100px solid #64cbba;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 340px;
       line-height: 100px;
     }
     .trapezoid3 {
-      border-top: 100px solid #35b63d;
+      border-top: 100px solid #f5c277;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 240px;

src/views/liveBroadcast/manage/index.vue

@@ -263,7 +263,7 @@
               "
               type="text"
               @click="toDateDetail(scope.row)"
-              >数据大屏</el-button
+              >实时大屏</el-button
             >
             <el-button
               v-if="[5].includes(scope.row.status)"

src/views/liveBroadcast/manage/indexYx.vue

@@ -240,7 +240,7 @@
               "
               type="text"
               @click="toDateDetail(scope.row)"
-              >数据大屏</el-button
+              >实时大屏</el-button
             >
             <!-- <el-button v-if="[5].includes(scope.row.status)" type="text" @click="listing(scope.row)">重新上架</el-button> -->
             <!-- <el-button v-if="[3].includes(scope.row.status) && !scope.row.weight && user.roles[0] !== '运营'" @click="openRecommend(scope.row,1)"

src/views/operationManage/index.vue

@@ -53,7 +53,7 @@
           format="yyyy 第 WW 周"
           placeholder="选择周"
           value-format="yyyy-MM-dd HH:mm:ss"
-          :picker-options="{firstDayOfWeek: 1}"
+          :picker-options="{ firstDayOfWeek: 1 }"
         >
         </el-date-picker>
         <el-date-picker
@@ -84,10 +84,14 @@
         :class="[optActive === item.key ? 'active' : '']"
         @click="setLineChart(item.key, index)"
       >
-        <p v-if="item.key === 'finishReadRateMap'">{{ (item.num * 100).toFixed(2) }}% </p>
+        <p v-if="item.key === 'finishReadRateMap'">
-        <p v-else-if="item.key === 'orderAmountMap'">{{ (item.num / 100).toFixed(2) }}元 </p>
+          {{ (item.num * 100).toFixed(2) }}%
+        </p>
+        <p v-else-if="item.key === 'orderAmountMap'">
+          {{ (item.num / 100).toFixed(2) }}元
+        </p>
         <p v-else-if="item.unit === 's'">{{ formatDuration(item.num) }}</p>
-        <p v-else>{{ item.num }} </p>
+        <p v-else>{{ item.num }}</p>
         <h5>{{ item.label }}</h5>
       </li>
     </ul>
@@ -101,7 +105,7 @@
         <div class="data-chart">
           <div class="data-item">
             <h3>累计观看直播用户</h3>
-            <p>{{ funnelDataObj.totalReadUserCount || 0  }}</p>
+            <p>{{ funnelDataObj.totalReadUserCount || 0 }}</p>
             <div class="trapezoid-wrap trapezoid-wrap1">
               <div class="trapezoid trapezoid1"></div>
               <span>直播间用户</span>
@@ -109,7 +113,7 @@
           </div>
           <div class="data-item">
             <h3>累计点击产品用户</h3>
-            <p>{{ funnelDataObj.totalReadCartUserCount || 0  }}</p>
+            <p>{{ funnelDataObj.totalReadCartUserCount || 0 }}</p>
             <div class="trapezoid-wrap trapezoid-wrap2">
               <div class="trapezoid trapezoid2"></div>
               <span>访问产品</span>
@@ -126,7 +130,13 @@
             </div>
             <div>
               <h3>订单金额</h3>
-              <p>{{funnelDataObj.orderAmount ?  (funnelDataObj.orderAmount / 100).toFixed(2) :'0.00' }}</p>
+              <p>
+                {{
+                  funnelDataObj.orderAmount
+                    ? (funnelDataObj.orderAmount / 100).toFixed(2)
+                    : "0.00"
+                }}
+              </p>
             </div>
             <!-- <div>
               <h3>提佣订单数</h3>
@@ -144,11 +154,17 @@
             </div>
             <div>
               <h3>成交订单数</h3>
-              <p>{{ funnelDataObj.paidOrderCount || 0  }}</p>
+              <p>{{ funnelDataObj.paidOrderCount || 0 }}</p>
             </div>
             <div>
               <h3>成交金额</h3>
-              <p>{{ funnelDataObj.paidAmount ? (funnelDataObj.paidAmount/ 100).toFixed(2) : '0.00'}}</p>
+              <p>
+                {{
+                  funnelDataObj.paidAmount
+                    ? (funnelDataObj.paidAmount / 100).toFixed(2)
+                    : "0.00"
+                }}
+              </p>
             </div>
             <!-- <div>
               <h3>提佣签约订单数</h3>
@@ -173,13 +189,10 @@
             :start-time="startTime1"
             :rank-type="1"
             :rankingType="rankingType"
-            :timeType1 = "timeType1"
+            :timeType1="timeType1"
           />
         </el-tab-pane>
-        <el-tab-pane
+        <el-tab-pane key="2" label="观看时长榜单" name="2"
-          key="2"
-          label="观看时长榜单"
-          name="2"
           ><DataTable
             v-if="activeName === '2'"
             key="2"
@@ -188,12 +201,9 @@
             :start-time="startTime1"
             :rank-type="2"
             :rankingType="rankingType"
-            :timeType1 = "timeType1"
+            :timeType1="timeType1"
         /></el-tab-pane>
-        <el-tab-pane
+        <el-tab-pane key="3" label="带货订单数榜单" name="3"
-          key="3"
-          label="带货订单数榜单"
-          name="3"
           ><DataTable
             v-if="activeName === '3'"
             key="3"
@@ -202,12 +212,9 @@
             :start-time="startTime1"
             :rank-type="3"
             :rankingType="rankingType"
-            :timeType1 = "timeType1"
+            :timeType1="timeType1"
         /></el-tab-pane>
-        <el-tab-pane
+        <el-tab-pane key="4" label="带货订单金额榜单" name="4"
-          key="4"
-          label="带货订单金额榜单"
-          name="4"
           ><DataTable
             v-if="activeName === '4'"
             key="4"
@@ -216,7 +223,7 @@
             :start-time="startTime1"
             :rank-type="4"
             :rankingType="rankingType"
-            :timeType1 = "timeType1"
+            :timeType1="timeType1"
         /></el-tab-pane>
       </el-tabs>
       <el-form
@@ -238,7 +245,7 @@
                 { label: '年榜', id: 2 },
                 { label: '月', id: 3 },
                 { label: '周', id: 4 },
-                { label: '日', id: 5 },
+                { label: '日', id: 5 }
               ]"
               :key="item.id"
               :label="item.label"
@@ -273,7 +280,7 @@
             placeholder="选择周"
             value-format="yyyy-MM-dd HH:mm:ss"
             style="width: 100px"
-            :picker-options="{firstDayOfWeek: 1}"
+            :picker-options="{ firstDayOfWeek: 1 }"
           >
           </el-date-picker>
           <el-date-picker
@@ -294,177 +301,177 @@
   </div>
 </template>
 <script>
-import * as echarts from 'echarts'
+import * as echarts from "echarts";
-import dayjs from 'dayjs'
+import dayjs from "dayjs";
-import DataTable from './components/DataTable.vue'
+import DataTable from "./components/DataTable.vue";
-import { setLineOptions } from './config'
+import { setLineOptions } from "./config";
-import { tgList } from '@/api/adviser'
+import { tgList } from "@/api/adviser";
-import { liveFunnelStatistic, liveOperationStatistic } from '@/api/index'
+import { liveFunnelStatistic, liveOperationStatistic } from "@/api/index";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 import "dayjs/locale/zh-cn";
-var weekday = require('dayjs/plugin/weekday')
+var weekday = require("dayjs/plugin/weekday");
-dayjs.extend(weekday)
+dayjs.extend(weekday);
-dayjs.locale('zh-cn')
+dayjs.locale("zh-cn");
 export default {
   components: { DataTable },
   activated() {},
   data() {
     return {
-      tgId: '',
+      tgId: "",
       tgList: [],
       timeType: 1,
       timeType1: 1,
-      activeName: '1',
+      activeName: "1",
-      startTime: '',
+      startTime: "",
-      startTime1: '',
+      startTime1: "",
-      endTime: '',
+      endTime: "",
-      endTime1: '',
+      endTime1: "",
-      rankingType: '', // 榜单类型
+      rankingType: "", // 榜单类型
-      time: '',
+      time: "",
-      time1: '',
+      time1: "",
-      optActive: '',
+      optActive: "",
       optArr: [
         {
           num: 0,
-          label: '直播数',
+          label: "直播数",
-          key: 'videoCountMap',
+          key: "videoCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '直播时长',
+          label: "直播时长",
-          key: 'videoHourMap',
+          key: "videoHourMap",
-          unit: 's'
+          unit: "s"
         },
         {
           num: 0,
-          label: '观看人次',
+          label: "观看人次",
-          key: 'readCountMap',
+          key: "readCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '观看人数',
+          label: "观看人数",
-          key: 'readUserCountMap',
+          key: "readUserCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '观看时长',
+          label: "观看时长",
-          key: 'readHoursMap',
+          key: "readHoursMap",
-          unit: 's'
+          unit: "s"
         },
         {
           num: 0,
-          label: '人均观看时长',
+          label: "人均观看时长",
-          key: 'avgReadHoursMap',
+          key: "avgReadHoursMap",
-          unit: 's'
+          unit: "s"
         },
         {
           num: 0,
-          label: '完播率',
+          label: "完播率",
-          key: 'finishReadRateMap',
+          key: "finishReadRateMap",
-          unit: '%'
+          unit: "%"
         },
         {
           num: 0,
-          label: '参与互动人数',
+          label: "参与互动人数",
-          key: 'joinUserCountMap',
+          key: "joinUserCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '点击产品数',
+          label: "点击产品数",
-          key: 'browseProCountMap',
+          key: "browseProCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '下单未支付数',
+          label: "下单未支付数",
-          key: 'orderButNotPayCountMap',
+          key: "orderButNotPayCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '直播成交订单数',
+          label: "直播成交订单数",
-          key: 'orderCountMap',
+          key: "orderCountMap",
-          unit: ''
+          unit: ""
         },
         {
           num: 0,
-          label: '直播成交金额',
+          label: "直播成交金额",
-          key: 'orderAmountMap',
+          key: "orderAmountMap",
-          unit: '分'
+          unit: "分"
         }
       ],
       optDataObj: {},
       funnelDataObj: {}, // 漏斗数据
       lineChart: null
-    }
+    };
   },
   computed: {
-    ...mapGetters(['user'])
+    ...mapGetters(["user"])
   },
   watch: {
     timeType(value) {
-      this.time = this.startTime = this.endTime = ''
+      this.time = this.startTime = this.endTime = "";
     },
     time(value) {
-      this.startTime = value
+      this.startTime = value;
-      if(value === null){
+      if (value === null) {
-        return this.endTime1 = null
+        return (this.endTime1 = null);
       }
       switch (this.timeType) {
         case 1:
-          this.startTime = dayjs(value)
+          this.startTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
-            .format('YYYY-MM-DD HH:mm:ss')
           this.endTime = dayjs(value)
-            .add(7, 'day')
+            .add(7, "day")
-            .format('YYYY-MM-DD HH:mm:ss')
+            .format("YYYY-MM-DD HH:mm:ss");
-          break
+          break;
         case 2:
           this.endTime = dayjs(value)
-            .add(1, 'month')
+            .add(1, "month")
-            .format('YYYY-MM-DD HH:mm:ss')
+            .format("YYYY-MM-DD HH:mm:ss");
-          break
+          break;
         case 3:
           this.endTime = dayjs(value)
-            .add(1, 'year')
+            .add(1, "year")
-            .format('YYYY-MM-DD HH:mm:ss')
+            .format("YYYY-MM-DD HH:mm:ss");
-          break
+          break;
         default:
-          break
+          break;
       }
     },
     timeType1(value) {
-      this.time1 = this.startTime1 = this.endTime1 = ''
+      this.time1 = this.startTime1 = this.endTime1 = "";
     },
     time1(value) {
-      this.startTime1 = value
+      this.startTime1 = value;
-      if(value === null || value === ''){
+      if (value === null || value === "") {
-        return this.endTime1 = null
+        return (this.endTime1 = null);
       }
-      if(this.startTime1 !== null){
+      if (this.startTime1 !== null) {
-        this.startTime1 = dayjs(this.startTime1).format('YYYY-MM-DD HH:mm:ss')
+        this.startTime1 = dayjs(this.startTime1).format("YYYY-MM-DD HH:mm:ss");
       }
-      if(this.timeType1 == 2){
+      if (this.timeType1 == 2) {
         this.endTime1 = dayjs(value)
-            .add(1, 'year')
+          .add(1, "year")
-            .format('YYYY-MM-DD HH:mm:ss')
+          .format("YYYY-MM-DD HH:mm:ss");
-      }else if(this.timeType1 == 3){
+      } else if (this.timeType1 == 3) {
         this.endTime1 = dayjs(value)
-            .add(1, 'month')
+          .add(1, "month")
-            .format('YYYY-MM-DD HH:mm:ss')
+          .format("YYYY-MM-DD HH:mm:ss");
-      }else if(this.timeType1 == 4){
+      } else if (this.timeType1 == 4) {
-        this.startTime1 = dayjs(value).subtract(1, 'day')
+        this.startTime1 = dayjs(value)
-            .format('YYYY-MM-DD HH:mm:ss')
+          .subtract(1, "day")
-          this.endTime1 = dayjs(value)
+          .format("YYYY-MM-DD HH:mm:ss");
-            .add(6, 'day')
+        this.endTime1 = dayjs(value)
-            .format('YYYY-MM-DD HH:mm:ss')
+          .add(6, "day")
-      }else if(this.timeType1 == 5){
+          .format("YYYY-MM-DD HH:mm:ss");
-            this.endTime1 = dayjs(value)
+      } else if (this.timeType1 == 5) {
-            .add(1, 'day')
+        this.endTime1 = dayjs(value)
-            .format('YYYY-MM-DD HH:mm:ss')
+          .add(1, "day")
+          .format("YYYY-MM-DD HH:mm:ss");
       }
       // switch (this.timeType1) {
       //   case 2:
@@ -493,21 +500,21 @@ export default {
       //     break
       // }
     },
-    activeName(value){
+    activeName(value) {
-      if(value){
+      if (value) {
-        this.timeType1 = 1
+        this.timeType1 = 1;
       }
     }
   },
   created() {
     this.time = `${dayjs()
       .weekday(0)
-      .format('YYYY-MM-DD')} 00:00:00`
+      .format("YYYY-MM-DD")} 00:00:00`;
   },
   mounted() {
     this.$nextTick(() => {
-      this.onSubmit()
+      this.onSubmit();
-    })
+    });
   },
 
   methods: {
@@ -515,14 +522,14 @@ export default {
       const ret = await tgList({
         current: 1,
         name,
-        showName: '',
+        showName: "",
         size: 100000,
-        staffNo: '',
+        staffNo: "",
         status: 3,
-        deptId:this.user.user.deptId
+        deptId: this.user.user.deptId
-      })
+      });
       if (ret.code === 0) {
-        this.tgList = ret.data.list
+        this.tgList = ret.data.list;
       }
     },
     async getLiveOperationStatistic() {
@@ -531,97 +538,101 @@ export default {
         endTime: this.endTime,
         searchType: this.timeType ? this.timeType : 3,
         startTime: this.startTime,
-        userType:3
+        userType: 3
-      })
+      });
       if (ret.code === 0 && ret.data) {
-        this.optDataObj = ret.data
+        this.optDataObj = ret.data;
-        let readHoursMap = 0
+        let readHoursMap = 0;
-        let readUserCountMap = 0
+        let readUserCountMap = 0;
         this.optArr.forEach(item => {
-          item.num = 0
+          item.num = 0;
-          if(item.key === 'finishReadRateMap'){
+          if (item.key === "finishReadRateMap") {
-            item.num = this.optDataObj.totalFinishRate
+            item.num = this.optDataObj.totalFinishRate;
-          } else if (item.key === 'avgReadHoursMap') {
+          } else if (item.key === "avgReadHoursMap") {
-            item.num = readUserCountMap ? readHoursMap/readUserCountMap : 0
+            item.num = readUserCountMap ? readHoursMap / readUserCountMap : 0;
           } else {
             for (const key in this.optDataObj[item.key] || {}) {
-              item.num += this.optDataObj[item.key][key]
+              item.num += this.optDataObj[item.key][key];
             }
           }
-          if(item.key === 'readHoursMap') {
+          if (item.key === "readHoursMap") {
-            readHoursMap = item.num
+            readHoursMap = item.num;
-          } else if (item.key === 'readUserCountMap') {
+          } else if (item.key === "readUserCountMap") {
-            readUserCountMap = item.num
+            readUserCountMap = item.num;
           }
-        })
+        });
 
-        this.setLineChart('videoCountMap', 0)
+        this.setLineChart("videoCountMap", 0);
       } else {
-        this.lineChart && this.lineChart.clear()
+        this.lineChart && this.lineChart.clear();
         this.optArr.forEach(item => {
-          item.num = 0
+          item.num = 0;
-        })
+        });
       }
     },
     async getLiveFunnelStatistic() {
-      console.log(this.startTime1,this.endTime1)
+      console.log(this.startTime1, this.endTime1);
       const data = {
         type: this.tgId ? 1 : 3,
-        advisorId:this.tgId,
+        advisorId: this.tgId,
-        startTime :this.startTime,
+        startTime: this.startTime,
         endTime: this.endTime,
-        userType:3
+        userType: 3
-      }
+      };
-      const ret = await liveFunnelStatistic(data)
+      const ret = await liveFunnelStatistic(data);
       if (ret.code === 0 && ret.data) {
-        this.funnelDataObj = ret.data
+        this.funnelDataObj = ret.data;
       }
     },
     setLineChart(key, index) {
-      this.optActive = key
+      this.optActive = key;
-      this.lineChart = echarts.init(document.getElementById('line-chart'))
+      this.lineChart = echarts.init(document.getElementById("line-chart"));
-      const xData = []
+      const xData = [];
-      const seriesData = []
+      const seriesData = [];
       for (const subKey in this.optDataObj[key]) {
-        if(this.timeType === 3){
+        if (this.timeType === 3) {
-          xData.push(`${dayjs(subKey).format('MM')}月`)
+          xData.push(`${dayjs(subKey).format("MM")}月`);
         } else {
-          xData.push(`${dayjs(subKey).format('YYYY-MM-DD')}`)
+          xData.push(`${dayjs(subKey).format("YYYY-MM-DD")}`);
         }
-        seriesData.push(this.optDataObj[key][subKey])
+        seriesData.push(this.optDataObj[key][subKey]);
       }
       this.lineChart.setOption(
         setLineOptions({ xData, seriesData, unit: this.optArr[index].unit })
-      )
+      );
     },
     onSubmit() {
-      this.getTgList()
+      this.getTgList();
-      if(!this.endTime || !this.startTime){
+      if (!this.endTime || !this.startTime) {
-        this.startTime = "1999-01-01 00:00:00"
+        this.startTime = "1999-01-01 00:00:00";
-        this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+        this.endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
       }
-      this.getLiveFunnelStatistic()
+      this.getLiveFunnelStatistic();
-      this.getLiveOperationStatistic()
+      this.getLiveOperationStatistic();
     },
     onTableSubmit() {
       this.$nextTick(() => {
-        this.$refs[`tableRef${this.activeName}`].pageChange(1,this.startTime1,this.endTime1)
+        this.$refs[`tableRef${this.activeName}`].pageChange(
-      })
+          1,
+          this.startTime1,
+          this.endTime1
+        );
+      });
     },
     handleExport() {
       this.$nextTick(() => {
-      this.$refs[`tableRef${this.activeName}`].handleExport()
+        this.$refs[`tableRef${this.activeName}`].handleExport();
-    })
+      });
     },
     formatDuration(milliseconds) {
       var hours = Math.floor(milliseconds / 3600);
       var minutes = Math.floor((milliseconds % 3600) / 60);
       var secs = Math.floor(milliseconds % 60);
 
-      return hours + '时' + minutes + '分' + secs + '秒';
+      return hours + "时" + minutes + "分" + secs + "秒";
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -756,21 +767,21 @@ export default {
       }
     }
     .trapezoid1 {
-      border-top: 100px solid #5583f7;
+      border-top: 100px solid #5a8af6;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 440px;
       line-height: 100px;
     }
     .trapezoid2 {
-      border-top: 100px solid #8400ff;
+      border-top: 100px solid #64cbba;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 340px;
       line-height: 100px;
     }
     .trapezoid3 {
-      border-top: 100px solid #35b63d;
+      border-top: 100px solid #f5c277;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 240px;
@@ -785,9 +796,9 @@ export default {
     }
   }
 }
-.tabs-wrap{
+.tabs-wrap {
   position: relative;
-  .el-form{
+  .el-form {
     position: absolute;
     right: 0;
     top: 0;

src/views/operationManage/indexTg.vue

@@ -754,21 +754,21 @@ export default {
       }
     }
     .trapezoid1 {
-      border-top: 100px solid #5583f7;
+      border-top: 100px solid #5a8af6;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 440px;
       line-height: 100px;
     }
     .trapezoid2 {
-      border-top: 100px solid #8400ff;
+      border-top: 100px solid #64cbba;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 340px;
       line-height: 100px;
     }
     .trapezoid3 {
-      border-top: 100px solid #35b63d;
+      border-top: 100px solid #f5c277;
       border-left: 45px solid transparent;
       border-right: 45px solid transparent;
       width: 240px;