diff --git a/package.json b/package.json index 64d63cd..d2e2761 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,8 @@ "vuex": "3.1.0", "wangeditor": "^4.7.11", "webpack": "^4.47.0", - "xlsx": "^0.18.5" + "xlsx": "^0.18.5", + "amfe-flexible": "^2.2.1" }, "devDependencies": { "@babel/parser": "^7.7.4", diff --git a/public/index.html b/public/index.html index 0e4dc6a..021e257 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,7 @@ <%= webpackConfig.name %> + diff --git a/public/static/css/normalize.css b/public/static/css/normalize.css new file mode 100644 index 0000000..ad35245 --- /dev/null +++ b/public/static/css/normalize.css @@ -0,0 +1,177 @@ +html, +body { + height: 100%; + /* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */ + font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helvetica, Arial, + "黑体", "宋体", Arial; + -webkit-tap-highlight-color: transparent; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +body { + font-size: 14px; + color: #333; +} + +/* 重置各标签的默认样式 */ +a, +body, +center, +cite, +code, +dd, +del, +div, +dl, +dt, +em, +fieldset, +figcaption, +figure, +footer, +form, +h1, +h2, +h3, +h4, +h5, +h6, +header, +hr, +html, +img, +input, +label, +legend, +li, +mark, +ol, +p, +section, +span, +textarea, +time, +td, +th, +ul { + margin: 0; + border: 0; + padding: 0; + font-style: normal; + box-sizing: border-box; + /* 自动换行 */ + word-wrap: break-word; + /* 强制英文单词断行 */ + word-break: break-all; +} + +/* 设置标签为块级分类 */ +article, +aside, +details, +fieldset, +figcaption, +figure, +footer, +header, +main, +nav, +section { + display: block; +} + +/* 去除input标签的默认样式 */ +button, +input, +textarea { + -webkit-appearance: none; + font-family: "Microsoft YaHei", sans-serif, "Helvetica Neue", Helvetica, Arial, + "黑体", "宋体", Arial; + border: 0; + margin: 0; + padding: 0; + font-size: 1em; + line-height: 1em; + outline: none; + background-color: transparent; +} + +/* 禁止多文本框手动拖动大小 */ +textarea { + resize: none; + -webkit-appearance: none; +} + +/* 去掉按下的阴影盒子 */ +input, +textarea, +a { + -webkit-tap-highlight-color: transparent; +} + +/* 清除a标签下划线 */ +a, +a:visited { + text-decoration: none; +} +a:focus, +a:active, +a:hover { + outline: none; +} + +/* 清除列表前面的点 */ +ol, +li, +ul { + list-style: none; +} + +/* 清除IE下图片的边框 */ +img { + border-style: none; + font-size: 0; +} + +/* 解决chrome浏览器默认黄色背景问题 */ +input:-webkit-autofill, +textarea:-webkit-autofill, +select:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #fff inset; +} + +/* 设置默认滚动条样式 */ +::-webkit-input-placeholder { + color: #afbdcc; +} +:-moz-placeholder { + color: #afbdcc; +} +::-moz-placeholder { + color: #afbdcc; +} +:-ms-input-placeholder { + color: #afbdcc; +} +::-webkit-scrollbar { + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track { + background-color: #f5f5f5; +} +::-webkit-scrollbar-track-piece { + background-color: #f5f5f5; + border-radius: 6px; +} +::-webkit-scrollbar-thumb { + background-color: #cccccc; + border-radius: 6px; +} +::-webkit-scrollbar-corner { + background-color: #f5f5f5; +} +::-webkit-resizer { + background-repeat: no-repeat; + background-position: bottom right; +} diff --git a/src/api/largeScreen.js b/src/api/largeScreen.js new file mode 100644 index 0000000..92785e6 --- /dev/null +++ b/src/api/largeScreen.js @@ -0,0 +1,24 @@ +import { post, get } from '@/utils/request' + +// 视频直播用户占比（新老）(直播数据大屏) +export const userShare = (params) => get('/admin/video/live/user-age', params) + +// 视频直播用户观众来源占比(直播数据大屏) +export const userChannel = (params) => get('/admin/video/live/user-channel', params) + +// 带货榜单(直播数据大屏) +export const productSale = (params) => get('/admin/video/live/product-sale', params) + +// 视频直播数据概况（已对接订单）(直播数据大屏) +export const dataOverview = (params) => get('/admin/video/live/data-overview', params) + +// 视频直播实时趋势-在线人数 +export const nowTrend = (params) => get('/admin/video/live/nowTrend', params); + +// 成交金额曲线(直播数据大屏) +export const productSaleLine = (params) => get('/admin/video/live/product-sale-line', params); + +// 用户省份分布(直播数据大屏) +export const userProvince = (params) => get('/admin/video/live/user-province', params); +//合并返回(直播数据大屏) +export const liveScreen = (params) => get('/admin/video/live/screen', params); diff --git a/src/assets/images/largeScreen/gold_1.png b/src/assets/images/largeScreen/gold_1.png new file mode 100644 index 0000000..e49db4e Binary files /dev/null and b/src/assets/images/largeScreen/gold_1.png differ diff --git a/src/assets/images/largeScreen/gold_2.png b/src/assets/images/largeScreen/gold_2.png new file mode 100644 index 0000000..d91eb7d Binary files /dev/null and b/src/assets/images/largeScreen/gold_2.png differ diff --git a/src/assets/images/largeScreen/gold_3.png b/src/assets/images/largeScreen/gold_3.png new file mode 100644 index 0000000..de09e98 Binary files /dev/null and b/src/assets/images/largeScreen/gold_3.png differ diff --git a/src/assets/images/largeScreen/left_bottom_line.png b/src/assets/images/largeScreen/left_bottom_line.png new file mode 100644 index 0000000..cb98556 Binary files /dev/null and b/src/assets/images/largeScreen/left_bottom_line.png differ diff --git a/src/assets/images/largeScreen/left_top_line.png b/src/assets/images/largeScreen/left_top_line.png new file mode 100644 index 0000000..69ce883 Binary files /dev/null and b/src/assets/images/largeScreen/left_top_line.png differ diff --git a/src/assets/images/largeScreen/left_top_line@2x.png b/src/assets/images/largeScreen/left_top_line@2x.png new file mode 100644 index 0000000..78f9f93 Binary files /dev/null and b/src/assets/images/largeScreen/left_top_line@2x.png differ diff --git a/src/assets/images/largeScreen/live-count-icon.png b/src/assets/images/largeScreen/live-count-icon.png new file mode 100644 index 0000000..efe0b64 Binary files /dev/null and b/src/assets/images/largeScreen/live-count-icon.png differ diff --git a/src/assets/images/largeScreen/live_end_btn.png b/src/assets/images/largeScreen/live_end_btn.png new file mode 100644 index 0000000..0ad87fa Binary files /dev/null and b/src/assets/images/largeScreen/live_end_btn.png differ diff --git a/src/assets/images/largeScreen/ls-bg.png b/src/assets/images/largeScreen/ls-bg.png new file mode 100644 index 0000000..399f355 Binary files /dev/null and b/src/assets/images/largeScreen/ls-bg.png differ diff --git a/src/assets/images/largeScreen/right_bottom_line.png b/src/assets/images/largeScreen/right_bottom_line.png new file mode 100644 index 0000000..53590ed Binary files /dev/null and b/src/assets/images/largeScreen/right_bottom_line.png differ diff --git a/src/assets/images/largeScreen/right_top_line.png b/src/assets/images/largeScreen/right_top_line.png new file mode 100644 index 0000000..e8f4df1 Binary files /dev/null and b/src/assets/images/largeScreen/right_top_line.png differ diff --git a/src/assets/images/largeScreen/title-bg.png b/src/assets/images/largeScreen/title-bg.png new file mode 100644 index 0000000..9db19c1 Binary files /dev/null and b/src/assets/images/largeScreen/title-bg.png differ diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue index 017bca7..244d4a3 100644 --- a/src/layout/components/Sidebar/SidebarItem.vue +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -42,7 +42,7 @@ diff --git a/src/router/routers.js b/src/router/routers.js index 5b5f954..96cc3e1 100644 --- a/src/router/routers.js +++ b/src/router/routers.js @@ -5,6 +5,11 @@ import Layout from "../layout/index"; Vue.use(Router); export const constantRouterMap = [ + { + path: "/largeScreen/index", + component: () => import("@/views/largeScreen/index"), + hidden: true + }, { path: "/login", meta: { title: "登录", noCache: true }, @@ -35,10 +40,9 @@ export const constantRouterMap = [ { path: "/", component: Layout, - redirect: "/dashboard", children: [ { - path: "dashboard", + path: "", component: resolve => require(["@/views/home"], resolve), name: "首页", meta: { title: "首页", icon: "index", affix: true, noCache: true } @@ -50,7 +54,6 @@ export const constantRouterMap = [ path: "/liveBroadcast", component: Layout, hidden: true, - redirect: "noredirect", children: [ { path: "liveBroadcastCreate", @@ -76,6 +79,13 @@ export const constantRouterMap = [ component: () => import("@/views/liveBroadcast/marketing/data"), name: "直播数据", meta: { title: "直播数据" } + }, + { + path: "liveBroadcastDetail", + component: () => + import("@/views/liveBroadcast/manage/components/detail"), + name: "直播单场分析", + meta: { title: "直播单场分析" } } ] }, @@ -83,7 +93,6 @@ export const constantRouterMap = [ path: "/user", component: Layout, hidden: true, - redirect: "noredirect", children: [ { path: "center", @@ -141,7 +150,7 @@ export const constantRouterMap = [ export default new Router({ // mode: 'hash', - mode: "history", + // mode: "history", scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }); diff --git a/src/utils/auth.js b/src/utils/auth.js index f7558ed..91e6cf3 100644 --- a/src/utils/auth.js +++ b/src/utils/auth.js @@ -5,7 +5,7 @@ const TokenKey = Config.TokenKey; export function getToken() { // return Cookies.get(TokenKey) - return "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJiYWNrZW5kVXNlciI6IntcImRlcHRJZFwiOlwiMVwiLFwibG9naW5JZFwiOjEsXCJyb2xlc1wiOlsxXSxcInVzZXJJZFwiOjEsXCJ1c2VyTmFtZVwiOlwiYWRtaW5cIn0iLCJleHAiOjE3Mzc5NzE3NTB9.NNSDWiL4G6YBW9sRVzTI2Ju6-0el7LOFvofDndFsoEY"; + return "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJiYWNrZW5kVXNlciI6IntcImRlcHRJZFwiOlwiMVwiLFwibG9naW5JZFwiOjEsXCJyb2xlc1wiOlsxXSxcInVzZXJJZFwiOjEsXCJ1c2VyTmFtZVwiOlwiYWRtaW5cIn0iLCJleHAiOjE3Mzg0MTQwMzF9.iVfp38Qsy6s-bOAFlqsTgCam0GNkMIZl_faFnvggiHA"; } export function setToken(token, rememberMe) { diff --git a/src/views/circle/detail/index.vue b/src/views/circle/detail/index.vue index b7c71c5..9e7f95e 100644 --- a/src/views/circle/detail/index.vue +++ b/src/views/circle/detail/index.vue @@ -64,7 +64,12 @@ alt="" /> - +
@@ -123,6 +128,14 @@
+
+
+ +

萨达鲁大师克拉岛奥德赛拉

+

[图片]

+
+ +
@@ -294,4 +307,16 @@ export default { } } } +.quote { + display: flex; + justify-content: space-between; + background: rgba(155, 155, 155, 0.2); + padding: 10px; + .quote-content { + display: flex; + } + i { + cursor: pointer; + } +} diff --git a/src/views/home.vue b/src/views/home.vue index c2f031b..7da0bb1 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -1,107 +1,17 @@ - + diff --git a/src/views/largeScreen/config/index.js b/src/views/largeScreen/config/index.js new file mode 100644 index 0000000..0dd4c45 --- /dev/null +++ b/src/views/largeScreen/config/index.js @@ -0,0 +1,1307 @@ + +import * as echarts from "echarts" +// 用户占比 +export const userShareConfig = { + grid: { + left: '0%', + right: '0%', + bottom: '3%', + top: '4%', + }, + xAxis: + { + show: false, + } + , + yAxis: + { + show: false, + type: 'category', + }, + title: { + show: false, + text: "暂无数据", + left: "center", + top: "center" + }, + series: [ + { + // animation: false, // 关闭柱状图的动画效果 + name: '新用户', + type: 'bar', + stack: 'total', + data: [], + barWidth: 12, + yAxisIndex: 0, + itemStyle: { + color: '#0389FC', + borderWidth: 2, + // barBorderRadius: [12, 0, 0, 12], + + + }, + label: { + // animation: false, // 关闭柱状图的动画效果 + // show: true, + // position: 'right', + // distance: 8, + formatter: '{insideTopRight|}', + // rich: { + // insideTopRight: { + // color: 'red', + // align: 'right', + // width: 0, + // verticalAlign: "top", + // lineHeight: 14, + // fontSize: 17 + // } + // } + }, + + }, + { + // animation: false, // 关闭柱状图的动画效果 + name: '老用户', + type: 'bar', + stack: 'total', + data: [], + barWidth: 12, + itemStyle: { + color: '#F0A610', + barBorderRadius: [0, 12, 12, 0] + }, + }, + ] +} +// 用户来源 +export const userSourceConfig = { + color: ["#0384fb", "#dc5151", "#00feff", "#f0a610"], + tooltip: { + trigger: "item", + show: false + }, + legend: { + type: "scroll", + // selectedMode: false, + orient: "vertical", + right: 0, + top: "center", + icon: "rect", // 修改形状 + itemWidth: 12, + itemHeight: 12, + textStyle: { + fontSize: 18, + color: "#fff", + padding: [0, 0, 0, 0], // 修改文字和图标距离 + rich: { + name: { + align: "left", + width: 100, + fontSize: 16, + }, + v: { + + borderRadius: "1px", + align: "right", + width: 20, + fontSize: 16, + }, + }, + }, + }, + title: { + show: false, + text: "暂无数据", + left: "center", + top: "center" + }, + series: [ + { + name: "", + type: "pie", + radius: ["60%", "80%"], + center: ["30%", "50%"], + avoidLabelOverlap: false, + label: { + show: false, + position: "center", + }, + emphasis: { + label: { + show: true, + fontSize: 26, + fontWeight: "bold", + }, + }, + labelLine: { + show: false, + }, + data: [], + }, + ], + // backgroundColor: "#FFF", +} +// 在线人数 +export const onlinePeopleConfig = { + grid: { + left: '5%', + right: '5%', + bottom: '15%', + top: '15%', + containLabel: true, + }, + title: { + show: false, + text: "暂无数据", + left: "center", + top: "center" + }, + dataZoom: [ + { + type: 'inside',//设置缩放方式为鼠标滚轮 + filterMode: 'none'//不过滤数据，只改变数轴范围 + } + ], + legend: { + top: 10, + bottom: 10, + orient: 'horizontal', + icon: "rect", + show: true, + // data: [], // Set the font color of the legend to red + // x: "330", // 水平居中 + itemWidth: 18, + itemHeight: 4, + itemStyle: { + borderWidth: 0, // 设置边框宽度为0，即去掉边框样式 + }, + textStyle: { + color: "#D8F0FF", + fontSize: 12, + }, + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLine: { + width: 20, + lineStyle: { + color: "#04aaff", + } + }, + axisLabel: { + // interval:2, + fontSize: 16, + color: "#fff", + align: 'right', + showMinLabel: true, + showMaxLabel: true, + }, + axisTick: { + show: false + }, + data: [] + }, + yAxis: { + type: 'value', + minInterval: 1, + min: 0, + axisLine: { + width: 20, + lineStyle: { + color: "#04aaff", + } + }, + axisLabel: { + fontSize: 16, + color: "#fff" + }, + + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: "rgba(0, 157, 255, 0.14)", + type: "solid", + width: 2, + }, + }, + }, + tooltip: { + trigger: 'axis', + padding: [0, 10, 0, 0], + backgroundColor: "rgba(50,50,50,0.7)", + formatter: function (series) { + let liStr = `
+ ${series[0].axisValueLabel}
` + let seriesItem + for (let index = 0; index < series.length; index++) { + seriesItem = series[index]; + const colors = ["#4EA6FE", "#00FEFF", "#F0A610"]; + liStr += `
  • + ${seriesItem.seriesName + } : + ${seriesItem.value}
    • ` + } + return `
      ${liStr}
    ` + }, + }, + series: [ + { + name: '在线人数', + data: [], + type: 'line', + smooth: true, + symbolSize: 0.01, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [ + { + offset: 0, + + color: 'rgba(170, 201 ,234,0.8)' + }, + { + offset: 1, + + color: 'rgba(170, 201 ,234,0)' + }, + { + offset: 0, + color: 'rgba(170, 201 ,234,1)' + + }, + ]) + }, + itemStyle: { + // color: "#3D5DF4", + color: '#4EA6FE' + }, + lineStyle: { + // 线条加阴影 + // 设置阴影颜色 + // shadowColor: "#3D5DF4", + shadowColor: "#4EA6FE", + shadowOffsetX: 0, + width: 2, + // 设置阴影沿y轴偏移量为9 + shadowOffsetY: 9, + // 设置阴影的模糊大小 + shadowBlur: 10, + // 设置线条渐变色 + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: "#94C2FD00" }, + { offset: 0.2, color: "#4EA6FE" }, + { offset: 0.1, color: "#5B8FF900" }, + ]), + }, + }, + { + name: '进场人数', + data: [], + type: 'line', + smooth: true, + symbolSize: 0.01, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [ + { + offset: 0, + + color: 'rgba(0, 254 ,255,0.8)' + }, + { + offset: 1, + + color: 'rgba(0, 254 ,255,0)' + }, + { + offset: 0, + color: 'rgba(0, 254 ,255,1)' + + }, + ]) + }, + itemStyle: { + color: '#00FEFF' + }, + lineStyle: { + // 线条加阴影 + // 设置阴影颜色 + // shadowColor: "#3D5DF4", + shadowColor: "#4EA6FE", + shadowOffsetX: 0, + width: 2, + // 设置阴影沿y轴偏移量为9 + shadowOffsetY: 9, + // 设置阴影的模糊大小 + shadowBlur: 10, + // 设置线条渐变色 + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: "#00FEFF00" }, + { offset: 0.2, color: "#00FEFFFE" }, + { offset: 0.1, color: "#00FEFF00" }, + ]), + }, + + + + }, + { + name: '离场人数', + data: [], + type: 'line', + smooth: true, + symbolSize: 0.01, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [ + { + offset: 0, + + color: 'rgba(240, 166, 16,0.8)' + }, + { + offset: 1, + + color: 'rgba(240, 166, 16,0)' + }, + { + offset: 0, + color: 'rgba(240, 166, 16,1)' + + }, + ]) + }, + itemStyle: { + color: '#F0A610' + }, + lineStyle: { + // 线条加阴影 + // 设置阴影颜色 + // shadowColor: "#3D5DF4", + shadowColor: "#4EA6FE", + shadowOffsetX: 0, + width: 2, + // 设置阴影沿y轴偏移量为9 + shadowOffsetY: 9, + // 设置阴影的模糊大小 + shadowBlur: 10, + // 设置线条渐变色 + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: "#F0A61000" }, + { offset: 0.2, color: "#F0A610FE" }, + { offset: 0.1, color: "#F0A61000" }, + ]), + }, + } + ] +} + +// 成交金额 +export const volumeTransactionConfig = { + grid: { + left: '5%', + right: '5%', + bottom: '3%', + top: '10%', + containLabel: true, + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLine: { + width: 20, + lineStyle: { + color: "#04aaff", + } + }, + axisLabel: { + interval: 0, + fontSize: 16, + color: "#fff", + formatter: (value, index) => { + if (value) return value.slice(value.length-8,value.length-3) + }, + }, + axisTick: { + show: false + }, + data: [] + }, + yAxis: { + type: 'value', + axisLine: { + width: 20, + lineStyle: { + color: "#04aaff", + } + }, + axisLabel: { + fontSize: 16, + color: "#fff" + }, + + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: "rgba(0, 157, 255, 0.14)", + type: "solid", + width: 2, + }, + }, + }, + dataZoom: [ + { + type: 'inside',//设置缩放方式为鼠标滚轮 + filterMode: 'none'//不过滤数据，只改变数轴范围 + } + ], + title: { + show: false, + text: "暂无数据", + left: "center", + top: "center" + }, + tooltip: { + trigger: 'axis', + padding: [0, 10, 0, 0], + backgroundColor: "rgba(50,50,50,0.7)", + formatter: function (series) { + let liStr = `
    + ${series[0].axisValueLabel ? series[0].axisValueLabel : series[0].axisValueLabel}
    ` + let seriesItem + for (let index = 0; index < series.length; index++) { + seriesItem = series[index]; + const colors = ["#4EA6FE", "#00FEFF", "#F0A610"]; + liStr += `
  • + ${seriesItem.seriesName + } : + ${seriesItem.value}
    • ` + } + return `
      ${liStr}
    ` + }, + }, + series: [ + { + name: '成交金额', + data: [], + type: 'line', + smooth: true, + symbolSize: 0.01, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [ + { + offset: 0, + + color: 'rgba(170, 201 ,234,0.8)' + }, + { + offset: 1, + + color: 'rgba(170, 201 ,234,0)' + }, + { + offset: 0, + color: 'rgba(170, 201 ,234,1)' + + }, + ]) + }, + itemStyle: { + // color: "#3D5DF4", + color: '#4EA6FE' + }, + lineStyle: { + // 线条加阴影 + // 设置阴影颜色 + // shadowColor: "#3D5DF4", + shadowColor: "#4EA6FE", + shadowOffsetX: 0, + width: 2, + // 设置阴影沿y轴偏移量为9 + shadowOffsetY: 9, + // 设置阴影的模糊大小 + shadowBlur: 10, + // 设置线条渐变色 + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: "#94C2FD00" }, + { offset: 0.2, color: "#4EA6FE" }, + { offset: 0.1, color: "#5B8FF900" }, + ]), + }, + } + ] +} + +export const showFields = [ + { + name: "直播观看人次", + field: "readNum" + }, + { + name: "直播观看人数", + field: "readPeopleNum" + }, + { + name: "人均观看时长(分钟)", + field: "readDurationAvg" + }, + { + name: "点赞数", + field: "favorCount" + }, + { + name: "评论数", + field: "messCount" + }, + { + name: "分享数", + field: "shareCount" + }, + { + name: "产品点击数", + field: "browseProCount" + }, + { + name: "产品签约数", + field: "subCount" + } +]; + + + +// 直播地图 +// export const liveMapConfig = { +// backgroundColor: "transparent", +// tooltip: { +// show: true, // 是否显示 tooltip +// trigger: 'item', // 触发类型，这里设置为 'item' 表示鼠标悬停在图形上时触发显示 +// formatter: function (params) { +// console.log('params=>', params); +// if (params.componentSubType == 'map') +// return params.name + ': ' + params.value; // 自定义 tooltip 的内容，这里展示区域名称和数值 +// } +// }, +// geo: [ +// { +// layoutCenter: ['50%', '50%'],//位置 +// layoutSize: '220%',//大小 +// show: true, +// map: mapName, +// roam: false, +// zoom: 0.65, +// aspectScale: 1, +// label: { +// normal: { +// show: false, +// textStyle: { +// color: '#fff' +// } +// }, +// emphasis: { +// show: true, +// textStyle: { +// color: '#fff' +// } +// } +// }, +// itemStyle: { +// normal: { +// areaColor: { +// type: "linear", +// x: 1200, +// y: 0, +// x2: 0, +// y2: 0, +// colorStops: [{ +// offset: 0, +// color: "rgba(3,27,78,0.75)", // 0% 处的颜色 +// }, { +// offset: 1, +// color: "rgba(58,149,253,0.75)", // 50% 处的颜色 +// },], +// global: true, // 缺省为 false +// }, +// borderColor: "#c0f3fb", +// borderWidth: 1, +// shadowColor: "#8cd3ef", +// shadowOffsetY: 10, +// shadowBlur: 120, +// }, +// emphasis: { +// areaColor: "rgba(0,254,233,0.6)", +// // borderWidth: 0 +// } +// } +// }, { +// type: "map", +// map: mapName, +// zlevel: -1, +// aspectScale: 1, +// zoom: 0.65, +// layoutCenter: ["50%", "51%"], +// layoutSize: "220%", +// roam: false, +// silent: true, +// itemStyle: { +// normal: { +// borderWidth: 1, +// borderColor: "rgba(58,149,253,0.8)", +// shadowColor: "rgba(172, 122, 255,0.5)", +// shadowOffsetY: 5, +// shadowBlur: 15, +// areaColor: "rgba(5,21,35,0.1)", +// }, +// }, +// }, { +// type: "map", +// map: mapName, +// zlevel: -2, +// aspectScale: 1, +// zoom: 0.65, +// layoutCenter: ["50%", "52%"], +// layoutSize: "220%", +// roam: false, +// silent: true, +// itemStyle: { +// normal: { +// borderWidth: 1, +// // borderColor: "rgba(57, 132, 188,0.4)", +// borderColor: "rgba(58,149,253,0.6)", +// shadowColor: "rgba(65, 214, 255,1)", +// shadowOffsetY: 5, +// shadowBlur: 15, +// areaColor: "transpercent", +// }, +// }, +// }, +// { +// type: "map", +// map: mapName, +// zlevel: -3, +// aspectScale: 1, +// zoom: 0.65, +// layoutCenter: ["50%", "53%"], +// layoutSize: "220%", +// roam: false, +// silent: true, +// itemStyle: { +// normal: { +// borderWidth: 1, +// // borderColor: "rgba(11, 43, 97,0.8)", +// borderColor: "rgba(58,149,253,0.4)", +// shadowColor: "rgba(58,149,253,1)", +// shadowOffsetY: 15, +// shadowBlur: 10, +// areaColor: "transpercent", +// }, +// }, +// }, +// { +// type: "map", +// map: mapName, +// zlevel: -4, +// aspectScale: 1, +// zoom: 0.65, +// layoutCenter: ["50%", "54%"], +// layoutSize: "220%", +// roam: false, +// silent: true, +// itemStyle: { +// normal: { +// borderWidth: 5, +// // borderColor: "rgba(11, 43, 97,0.8)", +// borderColor: "rgba(5,9,57,0.8)", +// shadowColor: "rgba(29, 111, 165,0.8)", +// shadowOffsetY: 15, +// shadowBlur: 10, +// areaColor: "rgba(5,21,35,0.1)", +// }, +// }, +// }, +// ], +// series: [ +// { +// type: 'map', +// map: mapName, +// geoIndex: 0, +// aspectScale: 1, //长宽比 +// zoom: 0.65, +// showLegendSymbol: true, +// roam: true, +// label: { +// normal: { +// show: true, +// textStyle: { +// color: "#fff", +// fontSize: "120%" +// }, +// }, +// emphasis: { +// // show: false, +// }, +// }, +// itemStyle: { +// normal: { +// areaColor: { +// type: "linear", +// x: 1200, +// y: 0, +// x2: 0, +// y2: 0, +// colorStops: [{ +// offset: 0, +// color: "rgba(3,27,78,0.75)", // 0% 处的颜色 +// }, { +// offset: 1, +// color: "rgba(58,149,253,0.75)", // 50% 处的颜色 +// },], +// global: true, // 缺省为 false +// }, +// borderColor: "#fff", +// borderWidth: 0.2, +// }, +// }, +// layoutCenter: ["50%", "50%"], +// layoutSize: "180%", +// animation: false, +// markPoint: { +// symbol: "none" +// }, +// data: data, +// }, +// //柱状体的主干 +// { +// type: 'lines', +// zlevel: 5, +// effect: { +// show: false, +// symbolSize: 5 // 图标大小 +// }, +// lineStyle: { +// width: 6, // 尾迹线条宽度 +// color: 'rgba(249, 105, 13, .6)', +// opacity: 1, // 尾迹线条透明度 +// curveness: 0 // 尾迹线条曲直度 +// }, +// label: { +// show: 0, +// position: 'end', +// formatter: '245' +// }, +// silent: true, +// data: lineData() +// }, +// // 柱状体的顶部 +// { +// type: 'scatter', +// coordinateSystem: 'geo', +// geoIndex: 0, +// zlevel: 5, +// label: { +// normal: { +// show: true, +// formatter: function (params) { +// var name = params.data[2].name +// var value = params.data[2].value +// var text = `{tline|${name}} : {fline|${value}}个` +// return text; +// }, +// color: '#fff', +// rich: { +// fline: { +// // padding: [0, 25], +// color: '#fff', +// fontSize: 14, +// fontWeight: 600 +// }, +// tline: { +// // padding: [0, 27], +// color: '#ABF8FF', +// fontSize: 12, +// }, +// } +// }, +// emphasis: { +// show: true +// } +// }, +// itemStyle: { +// color: '#00FFF6', +// opacity: 1 +// }, +// symbol: symbolImg, +// symbolSize: [110, 60], +// symbolOffset: [0, -20], +// z: 999, +// data: scatterData(), +// }, +// { +// name: 'Top 5', +// type: 'effectScatter', +// coordinateSystem: 'geo', +// data: convertData(toolTipData), +// showEffectOn: 'render', +// itemStyle: { +// normal: { +// color: '#00FFFF', +// } +// }, +// rippleEffect: { +// scale: 5, +// brushType: 'stroke', +// }, +// label: { +// normal: { +// formatter: '{b}', +// position: 'bottom', +// show: false, +// color: "#fff", +// distance: 10, +// }, +// }, +// symbol: 'circle', +// symbolSize: [20, 10], +// itemStyle: { +// normal: { +// color: '#16ffff', +// shadowBlur: 10, +// shadowColor: '#16ffff', +// }, +// opacity: 1 +// }, +// zlevel: 4, +// }, +// ], +// }; + +export const getLiveMapConfig = (dataArr, toolTipDataArr) => { + const symbolImg = "image://data:image/png;base64,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"; + const geoCoordMap = { + '黑龙江': [127.9688, 45.368], + '内蒙古': [110.3467, 41.4899], + "吉林": [125.8154, 44.2584], + '北京': [116.4551, 40.2539], + "辽宁": [123.1238, 42.1216], + "河北": [114.4995, 38.1006], + "天津": [117.4219, 39.4189], + "山西": [112.3352, 37.9413], + "陕西": [109.1162, 34.2004], + "甘肃": [103.5901, 36.3043], + "宁夏": [106.3586, 38.1775], + "青海": [98.4038, 36.8207], + "新疆": [87.611053, 43.828171], + "西藏": [91.117212, 29.646922], + "四川": [103.9526, 30.7617], + "重庆": [108.384366, 30.439702], + "山东": [117.1582, 36.8701], + "河南": [113.4668, 34.6234], + "江苏": [118.8062, 31.9208], + "安徽": [117.29, 32.0581], + "湖北": [114.3896, 30.6628], + "浙江": [119.5313, 29.8773], + "福建": [119.4543, 25.9222], + "江西": [116.0046, 28.6633], + "湖南": [113.0823, 28.2568], + "贵州": [106.6992, 26.7682], + "云南": [102.9199, 25.4663], + "广东": [113.12244, 23.009505], + "广西": [108.479, 23.1152], + "海南": [110.3893, 19.8516], + "台湾": [120.702967, 24.123621], + '上海': [121.4648, 31.2891], + '香港': [114.328125, 22.33984375], + '澳门': [113.5322265625, 22.17578125], + }; + const mapName = 'china'; + let data = []; + if (dataArr) data = dataArr + let toolTipData = []; + if (toolTipDataArr) toolTipData = toolTipDataArr.filter(item => geoCoordMap[item.name] != null); + // const data = [ + // { name: '北京', value: 5 }, + // { name: '天津', value: 14 }, + // { name: '河北', value: 157 }, + // { name: '山西', value: 110 }, + // { name: '内蒙古', value: 40 }, + // { name: '辽宁', value: 40 }, + // { name: '吉林', value: 40 }, + // { name: '黑龙江', value: 60 }, + // { name: '上海', value: 10 }, + // { name: '江苏', value: 60 }, + // { name: '浙江', value: 50 }, + // { name: '安徽', value: 151 }, + // { name: '福建', value: 60 }, + // { name: '江西', value: 74 }, + // { name: '山东', value: 200 }, + // { name: '河南', value: 100 }, + // { name: '湖北', value: 40 }, + // { name: '湖南', value: 50 }, + // { name: '重庆', value: 40 }, + // { name: '四川', value: 120 }, + // { name: '贵州', value: 135 }, + // { name: '云南', value: 90 }, + // { name: '西藏', value: 25 }, + // { name: '陕西', value: 100 }, + // { name: '甘肃', value: 60 }, + // { name: '青海', value: 20 }, + // { name: '宁夏', value: 110 }, + // { name: '新疆', value: 32 }, + // { name: '广东', value: 10 }, + // { name: '广西', value: 100 }, + // { name: '海南', value: 40 }, + // ]; + + + + const convertData = function (data) { + var res = []; + for (var i = 0; i < data.length; i++) { + var geoCoord = geoCoordMap[data[i].name]; + if (geoCoord) { + res.push({ + name: data[i].name, + value: geoCoord.concat(data[i].value), + }); + } + } + return res; + }; + const lineData = function () { + return toolTipData.map((item) => { + if (geoCoordMap[item.name] != null) { + return { + coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 1.5]] + } + } else { + return { + coords: [] + } + } + }) + } + + const scatterData = function () { + return toolTipData.map((item) => { + if (geoCoordMap[item.name]) return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item] + + }) + } + + const layoutSize = '155%'; + const liveMapConfig = { + grid: { + left: '10%', + right: '10%', + bottom: '0%', + top: '0%', + }, + backgroundColor: "transparent", + tooltip: { + show: true, // 是否显示 tooltip + trigger: 'item', // 触发类型，这里设置为 'item' 表示鼠标悬停在图形上时触发显示 + formatter: function (params) { + if (params.componentSubType == 'map' && params.data) { + return `
    ${params.name}
    +
    用户人数：${params.value}
    占比：${params.data.proportion != null ? parseFloat(params.data.proportion * 100).toFixed(2) + '%' : '--'}
    + ` + } + } + }, + geo: [ + { + layoutCenter: ['50%', '50%'],//位置 + // layoutSize: '220%',//大小 + layoutSize: layoutSize,//大小 + show: true, + map: mapName, + roam: false, + // zoom: 0.65, + aspectScale: 1, + label: { + normal: { + show: false, + textStyle: { + color: '#fff' + } + }, + emphasis: { + show: true, + textStyle: { + color: '#fff' + } + } + }, + itemStyle: { + normal: { + areaColor: { + type: "linear", + x: 1200, + y: 0, + x2: 0, + y2: 0, + colorStops: [{ + offset: 0, + color: "rgba(3,27,78,0.75)", // 0% 处的颜色 + }, { + offset: 1, + color: "rgba(58,149,253,0.75)", // 50% 处的颜色 + },], + global: true, // 缺省为 false + }, + borderColor: "#c0f3fb", + borderWidth: 1, + shadowColor: "#8cd3ef", + shadowOffsetY: 10, + shadowBlur: 120, + }, + emphasis: { + areaColor: "rgba(0,254,233,0.6)", + // borderWidth: 0 + } + } + }, { + type: "map", + map: mapName, + zlevel: -1, + aspectScale: 1, + // zoom: 0.65, + layoutCenter: ["50%", "51%"], + layoutSize: layoutSize, + roam: false, + silent: true, + itemStyle: { + normal: { + borderWidth: 1, + borderColor: "rgba(58,149,253,0.8)", + shadowColor: "rgba(172, 122, 255,0.5)", + shadowOffsetY: 5, + shadowBlur: 15, + areaColor: "rgba(5,21,35,0.1)", + }, + }, + }, { + type: "map", + map: mapName, + zlevel: -2, + aspectScale: 1, + // zoom: 0.65, + layoutCenter: ["50%", "52%"], + layoutSize: layoutSize, + roam: false, + silent: true, + itemStyle: { + normal: { + borderWidth: 1, + // borderColor: "rgba(57, 132, 188,0.4)", + borderColor: "rgba(58,149,253,0.6)", + shadowColor: "rgba(65, 214, 255,1)", + shadowOffsetY: 5, + shadowBlur: 15, + areaColor: "transpercent", + }, + }, + }, + { + type: "map", + map: mapName, + zlevel: -3, + aspectScale: 1, + // zoom: 0.65, + layoutCenter: ["50%", "53%"], + // layoutSize: "220%", + layoutSize: layoutSize, + roam: false, + silent: true, + itemStyle: { + normal: { + borderWidth: 1, + // borderColor: "rgba(11, 43, 97,0.8)", + borderColor: "rgba(58,149,253,0.4)", + shadowColor: "rgba(58,149,253,1)", + shadowOffsetY: 15, + shadowBlur: 10, + areaColor: "transpercent", + }, + }, + }, + { + type: "map", + map: mapName, + zlevel: -4, + aspectScale: 1, + // zoom: 0.65, + layoutCenter: ["50%", "54%"], + layoutSize: layoutSize, + roam: false, + silent: true, + itemStyle: { + normal: { + borderWidth: 5, + // borderColor: "rgba(11, 43, 97,0.8)", + borderColor: "rgba(5,9,57,0.8)", + shadowColor: "rgba(29, 111, 165,0.8)", + shadowOffsetY: 15, + shadowBlur: 10, + areaColor: "rgba(5,21,35,0.1)", + }, + }, + }, + ], + series: [ + { + type: 'map', + map: mapName, + geoIndex: 0, + aspectScale: 1, //长宽比 + zoom: 0.65, + showLegendSymbol: true, + roam: true, + label: { + normal: { + show: true, + textStyle: { + color: "#fff", + fontSize: "120%" + }, + }, + emphasis: { + // show: false, + }, + }, + itemStyle: { + normal: { + areaColor: { + type: "linear", + x: 1200, + y: 0, + x2: 0, + y2: 0, + colorStops: [{ + offset: 0, + color: "rgba(3,27,78,0.75)", // 0% 处的颜色 + }, { + offset: 1, + color: "rgba(58,149,253,0.75)", // 50% 处的颜色 + },], + global: true, // 缺省为 false + }, + borderColor: "#fff", + borderWidth: 0.2, + }, + }, + layoutCenter: ["50%", "50%"], + layoutSize: layoutSize, + animation: false, + markPoint: { + symbol: "none" + }, + data: data, + }, + //柱状体的主干 + { + type: 'lines', + zlevel: 5, + effect: { + show: false, + symbolSize: 5 // 图标大小 + }, + lineStyle: { + width: 6, // 尾迹线条宽度 + color: 'rgba(249, 105, 13, .6)', + opacity: 1, // 尾迹线条透明度 + curveness: 0 // 尾迹线条曲直度 + }, + label: { + show: 0, + position: 'end', + formatter: '245' + }, + silent: true, + data: lineData() + }, + // 柱状体的顶部 + { + type: 'scatter', + coordinateSystem: 'geo', + geoIndex: 0, + zlevel: 5, + label: { + normal: { + show: true, + formatter: function (params) { + var name = params.data[2].name + var value = params.data[2].value + var text = `{tline|${name}} : {fline|${value}}个` + return text; + }, + color: '#fff', + rich: { + fline: { + // padding: [0, 25], + color: '#fff', + fontSize: 14, + fontWeight: 600 + }, + tline: { + // padding: [0, 27], + color: '#ABF8FF', + fontSize: 12, + }, + } + }, + emphasis: { + show: true + } + }, + itemStyle: { + color: '#00FFF6', + opacity: 1 + }, + symbol: symbolImg, + symbolSize: [110, 60], + symbolOffset: [0, -20], + z: 999, + data: scatterData(), + }, + { + name: 'Top 5', + type: 'effectScatter', + coordinateSystem: 'geo', + data: convertData(toolTipData), + showEffectOn: 'render', + itemStyle: { + normal: { + color: '#00FFFF', + } + }, + rippleEffect: { + scale: 5, + brushType: 'stroke', + }, + label: { + normal: { + formatter: '{b}', + position: 'bottom', + show: false, + color: "#fff", + distance: 10, + }, + }, + symbol: 'circle', + symbolSize: [20, 10], + itemStyle: { + normal: { + color: '#16ffff', + shadowBlur: 10, + shadowColor: '#16ffff', + }, + opacity: 1 + }, + zlevel: 0, + }, + ], + } + return liveMapConfig; +} \ No newline at end of file diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue new file mode 100644 index 0000000..01da8d7 --- /dev/null +++ b/src/views/largeScreen/index.vue @@ -0,0 +1,1014 @@ + + + + + diff --git a/src/views/largeScreen/style/normalize.scss b/src/views/largeScreen/style/normalize.scss new file mode 100644 index 0000000..c2bef02 --- /dev/null +++ b/src/views/largeScreen/style/normalize.scss @@ -0,0 +1,47 @@ +* { + box-sizing: border-box; +} + +html, +body { + padding: 0; + margin: 0; + background: #fff; +} +html, +body, +#app { + height: 100%; +} + +body { + // overflow: hidden; +} + +#app { + // overflow-x: hidden; + // overflow-y: hidden; +} + +#app::-webkit-scrollbar { + width: 0; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; +} + +i { + font: inherit; +} + + + + diff --git a/src/views/liveBroadcast/list/components/batchCreate.vue b/src/views/liveBroadcast/list/components/batchCreate.vue index c1478a3..6555885 100644 --- a/src/views/liveBroadcast/list/components/batchCreate.vue +++ b/src/views/liveBroadcast/list/components/batchCreate.vue @@ -18,47 +18,62 @@ 每次最多支持添加50个直播
    - + - + @@ -66,8 +81,15 @@ format="yyyy-MM-dd HH:mm" @@ -79,25 +101,39 @@ format="yyyy-MM-dd HH:mm" + :close-on-click-modal="false" + >
    - -

    提示：批量修改的直播将按照“直播名称-1”、“直播名称-2”、“直播名称-3”的规律命名。

    + +

    + 提示：批量修改的直播将按照“直播名称-1”、“直播名称-2”、“直播名称-3”的规律命名。 +

    + v-model="dialogBatchForm.value" + :name.sync="dialogBatchForm.name" + :dept-id="user.user.deptId" + @init=" + item => { + dialogBatchForm.value = item.id; + dialogBatchForm.name = item.name; + } + " + >
    - + :before-upload="beforeUpload" + > + -
    -
    +
    @@ -296,33 +405,38 @@ class="avatar-uploader" - + @close="cancel()" + > + + > + clearable + show-word-limit + > - +
    只能上传jpg/png文件，且不超过1MB，建议尺寸104*140px；在直播间推荐产品后悬浮展示在右下角，若本场直播不涉及推送产品的场景，无需上传该封面图 @@ -342,23 +460,28 @@ show-word-limit - +
    取 消 - 确 定 + 确 定