diff --git a/package.json b/package.json index 9ffa71d..5743a5e 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index 961986e..b1a6e95 100644 --- a/postcss.config.js +++ b/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; + } + } + } } -} +}; diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue index 01da8d7..eb469d8 100644 --- a/src/views/largeScreen/index.vue +++ b/src/views/largeScreen/index.vue @@ -7,7 +7,9 @@ alt="" />结束直播 -

{{ viewData.title }}

+

+ {{ viewData.title }} +

@@ -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() { @@ -270,12 +272,12 @@ export default { // } else { // // 页面已打开，可以弹窗提示用户 // alert('该页面已在浏览器中打开！'); - + // window.close(); // 可选：关闭当前页面 // } this.videoId = this.$route.query.videoId; - let ret = await this.getDetail() - if(!ret)return + const ret = await this.getDetail(); + 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 }) - if(res && res.code === 0) { - this.detail = res.data - if(this.detail.advisorBasic.deptName !== this.$store.state.user.user.user.deptName && this.$store.state.user.user.user.deptId !== '1') { + const res = await infoGet({ id: this.videoId }); + if (res && res.code === 0) { + this.detail = res.data; + if ( + this.detail.advisorBasic.deptName !== + this.$store.state.user.user.user.deptName && + this.$store.state.user.user.user.deptId !== "1" + ) { // 不是一个部门的不让查看 总部的可以查看所有 - this.$alert('暂无查看权限！', '', { - confirmButtonText: '确定', + this.$alert("暂无查看权限！", "", { + 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 }); - if(code == 0 && data){ + const { code, data } = await liveScreen({ videoId: this.videoId }); + 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[1].data = this.allData.videoLiveTrendVOS.map(item => item.attendNum); - config.series[2].data = this.allData.videoLiveTrendVOS.map(item => item.leaveNum); + config.series[0].data = this.allData.videoLiveTrendVOS.map( + item => item.onlineNum + ); + 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; } diff --git a/src/views/liveBroadcast/list/index.vue b/src/views/liveBroadcast/list/index.vue index 96b98e8..1b517d1 100644 --- a/src/views/liveBroadcast/list/index.vue +++ b/src/views/liveBroadcast/list/index.vue @@ -265,7 +265,7 @@ " type="text" @click="toDateDetail(scope.row)" - >数据大屏实时大屏 数据大屏实时大屏
+
+
+ +
+
+ +
+
+ +

主播离开一会儿，请耐心等待~

+
+
+ + + + + + + + + + + +
+
+ 开放观众发言 + + 在聊天框中发送禁言/开启发言通知 +
+
+ 开启审核 + +
+ +
+ +
+
+

+ 产品列表 （说明：产品列表中仅展示申请上架直播时{{ + settingToC ? "配置" : "选择" + }}的产品） +

+
+ 取消推送产品 +
+
+ + + + + + + + + + + + + + + + +

+ （此处的上下架产品仅控制是否在购物车列表展示） +

+
+ +
+ 添加优惠券 + +
+

发放记录

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ 创建问卷 + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+
+ +
+
+ +
+
+
+
@@ -502,429 +899,6 @@
-
-
- -
-
- -
-
- -

主播离开一会儿，请耐心等待~

-
-
- - - - - - - - - - - -
-
- 开放观众发言 - - 在聊天框中发送禁言/开启发言通知 -
-
- 开启审核 - -
- -
- -
-
-

- 产品列表 （说明：产品列表中仅展示申请上架直播时{{ - settingToC ? "配置" : "选择" - }}的产品） -

-
- 取消推送产品 -
-
- - - - - - - - - - - - - - - - -

- （此处的上下架产品仅控制是否在购物车列表展示） -

-
- -
- 添加优惠券 - - -
-

发放记录

- - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- 创建问卷 - - - - - - - - - - - - - - - - - - - -
-
-
- - -
-
-
- -
-
- -
-
-
-
数据大屏实时大屏 数据大屏实时大屏