Skip to content

N
national_museum_vod-H5
Commit fbf73fb8 authored by Your Name's avatar Your Name
Browse files
Options

上传视频改为30M

parent 60fb94c8
Hide whitespace changes
Inline Side-by-side
Showing with 855 additions and 852 deletions
src/components/maps.vue
View file @ fbf73fb8
<template>
<div class="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span
>
<div id="mapDiv"></div>
</div>
</template>
<script>
// import "echarts/map/js/china";
import axios from "axios";
import echarts from "echarts";
export default {
name: "maps",
data() {
return {
dataList: [],
show: "province",
parentInfo: [
{
cityName: "全国",
code: 100000,
},
],
};
},
mounted() {
// this.getList();
this.initData(100000);
},
methods: {
getList(type, areaCode) {
let _this = this;
return new Promise((resolve, reject) => {
let httpUrl = "";
let dataList = [];
if (type === "china") {
httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
}
if (type === "map") {
httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
}
_this
.$shttp({
method: "post",
url: httpUrl,
authType: _this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
dataList = res.data.data;
} else {
dataList = [];
}
} else {
dataList = [];
}
resolve(dataList);
})
.catch((err) => {
this.$message.error(err.message);
resolve([]);
});
});
},
initData(adcode) {
Promise.all([
this.getGeoJson(adcode),
this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
]).then((res) => {
let features = res[0].features;
let json = res[1];
let flen = features.length;
let jlen = json.length;
for (let i = 0; i < flen; i++) {
for (let j = 0; j < jlen; j++) {
let jName = json[j].name.substring(0, 2);
if (features[i].properties.name.indexOf(jName) != -1) {
features[i].properties.value = json[j].value;
break;
}
}
}
this.getMapData({ features: features });
});
},
init(mapData) {
let _this = this;
let option = {
tooltip: {
// triggerOn: "click",
formatter: function (e, t, n) {
return 0.5 == e.value
? e.name + "：播放量"
: e.seriesName + "<br />" + e.name + "：" + e.value;
},
},
visualMap: [
{
dimension: 0,
left: "8%",
bottom: 20,
itemWidth: 16,
orient: "horizontal",
text: ["播放量", "由低到高"],
backgroundColor: "rgba(0,19,45,0.4)",
padding: 16,
textStyle: {
color: "gba(255,255,255,1)",
},
inRange: {
color: [
"rgba(161,255,255,1)",
"rgba(91,214,255,1)",
"rgba(38,157,255,1)",
"rgba(0,72,149,1)",
],
},
},
],
geo: {
map: _this.parentInfo.length === 1 ? "china" : "map",
roam: true, //是否开启平游或缩放
// scaleLimit: {
// //滚轮缩放的极限控制
// min: 1,
// // max: 2,
// },
zoom: 1.1,
top: 51,
label: {
normal: {
show: !0,
fontSize: "12",
color: "#968f8f",
formatter: (p) => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
}
return p.name;
},
},
emphasis: {
// color: "#ffffff",
show: true,
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
// areaColor: "#f2d5ad",
areaColor: "#8dd7fc",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
name: "播放量",
type: "map",
geoIndex: 0,
data: mapData,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option, true);
echartsDiv.on("click", _this.echartsMapClick);
},
handleBack() {
if (this.parentInfo.length === 1) {
return;
}
this.parentInfo.pop();
let areaCode = this.parentInfo[this.parentInfo.length - 1].code;
this.emitParent(areaCode);
this.initData(this.parentInfo[this.parentInfo.length - 1].code);
},
emitParent(areaCode) {
this.$emit("changeAreaCode", areaCode);
},
echartsMapClick(params) {
if (!params.data) {
return;
}
if (params.data.level === "district") {
return false;
}
let cityCode = params.data.cityCode;
this.emitParent(cityCode);
this.parentInfo.push({
cityName: params.data.name,
code: params.data.cityCode,
});
console.log(params.data.cityCode);
this.initData(cityCode);
},
//这里我封装了下，直接可以拿过来用
// getGeoJson(adcode, childAdcode = "") {
// return new Promise((resolve, reject) => {
// function insideFun(adcode, childAdcode) {
// AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
// var districtExplorer = new DistrictExplorer();
// districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
// if (error) {
// console.error(error);
// reject(error);
// return;
// }
// let Json = areaNode.getSubFeatures();
// if (Json.length === 0) {
// let parent = areaNode._data.geoData.parent.properties.acroutes;
// insideFun(parent[parent.length - 1], adcode);
// return;
// }
// if (childAdcode) {
// Json = Json.filter((item) => {
// return item.properties.adcode == childAdcode;
// });
// }
// let mapJson = {
// features: Json,
// };
// resolve(mapJson);
// });
// });
// }
// insideFun(adcode, childAdcode);
// });
// },
getGeoJson(adcode) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: `feature/${adcode}_full.json`,
}).then((res) => {
let mapJson = {
features: res.data.features,
};
resolve(mapJson);
});
});
},
getMapData(geoJson) {
// 获取后台接口数据
let Json = geoJson.features;
let mapData = Json.map((item) => {
return {
name: item.properties.name,
value: item.properties.value,
level: item.properties.level,
cityCode: item.properties.adcode,
};
});
let mapJson = {};
//geoJson必须这种格式
mapJson.features = Json;
//去渲染echarts
this.initEcharts(mapData, mapJson);
},
initEcharts(mapData, mapJson) {
echarts.registerMap(
this.parentInfo.length === 1 ? "china" : "map",
mapJson
);
this.init(mapData);
},
},
};
</script>
<style lang="scss">
.map-box {
width: 100%;
height: 100%;
#back {
position: absolute;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
left: 60px;
cursor: pointer;
z-index: 99;
&:hover {
color: #4efffd;
}
}
#mapDiv {
width: 100%;
height: 100%;
}
}
</style>
<template>
<div class="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span
>
<div id="mapDiv"></div>
</div>
</template>
<script>
// import "echarts/map/js/china";
import axios from "axios";
import echarts from "echarts";
export default {
name: "maps",
data() {
return {
dataList: [],
show: "province",
parentInfo: [
{
cityName: "全国",
code: 100000,
},
],
};
},
mounted() {
// this.getList();
this.initData(100000);
},
methods: {
getList(type, areaCode) {
let _this = this;
return new Promise((resolve, reject) => {
let httpUrl = "";
let dataList = [];
if (type === "china") {
httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
}
if (type === "map") {
httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
}
_this
.$shttp({
method: "post",
url: httpUrl,
authType: _this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
dataList = res.data.data;
} else {
dataList = [];
}
} else {
dataList = [];
}
resolve(dataList);
})
.catch((err) => {
this.$message.error(err.message);
resolve([]);
});
});
},
initData(adcode) {
Promise.all([
this.getGeoJson(adcode),
this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
]).then((res) => {
let features = res[0].features;
let json = res[1];
let flen = features.length;
let jlen = json.length;
for (let i = 0; i < flen; i++) {
for (let j = 0; j < jlen; j++) {
let jName = json[j].name.substring(0, 2);
if (features[i].properties.name.indexOf(jName) != -1) {
features[i].properties.value = json[j].value;
break;
}
}
}
this.getMapData({ features: features });
});
},
init(mapData) {
let _this = this;
let option = {
tooltip: {
// triggerOn: "click",
formatter: function (e, t, n) {
return 0.5 == e.value
? e.name + "：播放量"
: e.seriesName + "<br />" + e.name + "：" + e.value;
},
},
visualMap: [
{
dimension: 0,
left: "8%",
bottom: 20,
itemWidth: 16,
orient: "horizontal",
text: ["播放量", "由低到高"],
backgroundColor: "rgba(0,19,45,0.4)",
padding: 16,
textStyle: {
color: "gba(255,255,255,1)",
},
inRange: {
color: [
"rgba(161,255,255,1)",
"rgba(91,214,255,1)",
"rgba(38,157,255,1)",
"rgba(0,72,149,1)",
],
},
},
],
geo: {
map: _this.parentInfo.length === 1 ? "china" : "map",
roam: true, //是否开启平游或缩放
// scaleLimit: {
// //滚轮缩放的极限控制
// min: 1,
// // max: 2,
// },
zoom: 1.1,
top: 51,
label: {
normal: {
show: !0,
fontSize: "12",
color: "#968f8f",
formatter: (p) => {
switch (p.name) {
case "内蒙古自治区":
p.name = "内蒙古";
break;
case "西藏自治区":
p.name = "西藏";
break;
case "新疆维吾尔自治区":
p.name = "新疆";
break;
case "宁夏回族自治区":
p.name = "宁夏";
break;
case "广西壮族自治区":
p.name = "广西";
break;
case "香港特别行政区":
p.name = "香港";
break;
case "澳门特别行政区":
p.name = "澳门";
break;
}
return p.name;
},
},
emphasis: {
// color: "#ffffff",
show: true,
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
// areaColor: "#f2d5ad",
areaColor: "#8dd7fc",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
name: "播放量",
type: "map",
geoIndex: 0,
data: mapData,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option, true);
echartsDiv.on("click", _this.echartsMapClick);
},
handleBack() {
if (this.parentInfo.length === 1) {
return;
}
this.parentInfo.pop();
let areaCode = this.parentInfo[this.parentInfo.length - 1].code;
this.emitParent(areaCode);
this.initData(this.parentInfo[this.parentInfo.length - 1].code);
},
emitParent(areaCode) {
this.$emit("changeAreaCode", areaCode);
},
echartsMapClick(params) {
if (!params.data) {
return;
}
if (params.data.level === "district") {
return false;
}
let cityCode = params.data.cityCode;
this.emitParent(cityCode);
this.parentInfo.push({
cityName: params.data.name,
code: params.data.cityCode,
});
console.log(params.data.cityCode);
this.initData(cityCode);
},
//这里我封装了下，直接可以拿过来用
// getGeoJson(adcode, childAdcode = "") {
// return new Promise((resolve, reject) => {
// function insideFun(adcode, childAdcode) {
// AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
// var districtExplorer = new DistrictExplorer();
// districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
// if (error) {
// console.error(error);
// reject(error);
// return;
// }
// let Json = areaNode.getSubFeatures();
// if (Json.length === 0) {
// let parent = areaNode._data.geoData.parent.properties.acroutes;
// insideFun(parent[parent.length - 1], adcode);
// return;
// }
// if (childAdcode) {
// Json = Json.filter((item) => {
// return item.properties.adcode == childAdcode;
// });
// }
// let mapJson = {
// features: Json,
// };
// resolve(mapJson);
// });
// });
// }
// insideFun(adcode, childAdcode);
// });
// },
getGeoJson(adcode) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: `feature/${adcode}_full.json`,
}).then((res) => {
let mapJson = {
features: res.data.features,
};
resolve(mapJson);
});
});
},
getMapData(geoJson) {
// 获取后台接口数据
let Json = geoJson.features;
let mapData = Json.map((item) => {
return {
name: item.properties.name,
value: item.properties.value,
level: item.properties.level,
cityCode: item.properties.adcode,
};
});
let mapJson = {};
//geoJson必须这种格式
mapJson.features = Json;
//去渲染echarts
this.initEcharts(mapData, mapJson);
},
initEcharts(mapData, mapJson) {
echarts.registerMap(
this.parentInfo.length === 1 ? "china" : "map",
mapJson
);
this.init(mapData);
},
},
};
</script>
<style lang="scss">
.map-box {
width: 100%;
height: 100%;
#back {
position: absolute;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
left: 60px;
cursor: pointer;
z-index: 99;
&:hover {
color: #4efffd;
}
}
#mapDiv {
width: 100%;
height: 100%;
}
}
</style>
src/components/top10.vue
View file @ fbf73fb8
<template>
<div class="list-of-top10">
<triangle>
<slot>
<div class="list-of-top10-title common-title">
<img
class="icon-title"
src="@/assets/images/screen/boardsDemand.png"
alt=""
/>
<span class="title">{{ title }}</span>
<img class="bg" src="@/assets/images/screen/title01_bg.png" alt="" />
</div>
<div class="list-of-body">
<ul class="body-title">
<li class="f1">排名</li>
<li class="f7">展板名称</li>
<li class="f2">播放量</li>
</ul>
<div class="body-content" id="bodyContent">
<div id="con1">
<ul class="body-item" v-for="(item, index) in list" :key="index">
<li class="f1">{{ (index % 10) + 1 }}</li>
<li class="f7">
<div class="title" :title="item.boardName">
{{ item.boardName }}
</div>
</li>
<li class="f2">{{ item.playNumber }}</li>
</ul>
</div>
<div id="con2"></div>
<div id="con3"></div>
<div id="con4"></div>
<div id="con5"></div>
<div id="con6"></div>
</div>
</div>
</slot>
</triangle>
</div>
</template>
<script>
import triangle from "../components/slot/triangle";
import { getCurDate } from "./util.time.js";
export default {
name: "top10",
data() {
return {
title: "全国2021年3月展板点播TOP10",
timer: null,
speed: 50,
box: null,
con1: null,
list: [],
};
},
components: { triangle },
props: {
data: {
type: Array,
default: () => {
return [];
},
},
},
mounted() {
this.title = this.getTitle();
},
methods: {
clearDom(){
[2,3,4,5,6].forEach(v=>{
document.getElementById(`con${v}`).innerHTML = ""
})
},
getTitle() {
let curTime = getCurDate();
return `${curTime.year}年${curTime.month}月展板点播TOP10`;
},
initScroll() {
let _this = this;
this.box = document.getElementById("bodyContent");
this.con1 = document.getElementById("con1");
for (let i = 2; i < 7; i++) {
let con = document.getElementById(`con${i}`);
con.innerHTML = _this.con1.innerHTML;
}
this.timer = setInterval(_this.scrollUp, _this.speed);
},
scrollUp() {
if (this.box.scrollTop >= this.con1.scrollHeight) {
this.box.scrollTop = 0;
} else {
this.box.scrollTop++;
}
},
Ups() {
let _this = this;
this.timer = setInterval(_this.scrollUp, _this.speed);
},
Stops() {
clearInterval(this.timer);
},
},
watch: {
data() {
this.clearDom()
this.list = this.data;
if (this.list.length > 4) {
this.$nextTick(() => {
this.initScroll();
});
}
},
},
};
</script>
<style lang=scss>
</style>
<template>
<div class="list-of-top10">
<triangle>
<slot>
<div class="list-of-top10-title common-title">
<img
class="icon-title"
src="@/assets/images/screen/boardsDemand.png"
alt=""
/>
<span class="title">{{ title }}</span>
<img class="bg" src="@/assets/images/screen/title01_bg.png" alt="" />
</div>
<div class="list-of-body">
<ul class="body-title">
<li class="f1">排名</li>
<li class="f7">展板名称</li>
<li class="f2">播放量</li>
</ul>
<div class="body-content" id="bodyContent">
<div id="con1">
<ul class="body-item" v-for="(item, index) in list" :key="index">
<li class="f1">{{ (index % 10) + 1 }}</li>
<li class="f7">
<div class="title" :title="item.boardName">
{{ item.boardName }}
</div>
</li>
<li class="f2">{{ item.playNumber }}</li>
</ul>
</div>
<div id="con2"></div>
<div id="con3"></div>
<div id="con4"></div>
<div id="con5"></div>
<div id="con6"></div>
</div>
</div>
</slot>
</triangle>
</div>
</template>
<script>
import triangle from "../components/slot/triangle";
import { getCurDate } from "./util.time.js";
export default {
name: "top10",
data() {
return {
title: "全国2021年3月展板点播TOP10",
timer: null,
speed: 50,
box: null,
con1: null,
list: [],
};
},
components: { triangle },
props: {
data: {
type: Array,
default: () => {
return [];
},
},
},
mounted() {
this.title = this.getTitle();
},
methods: {
clearDom(){
[2,3,4,5,6].forEach(v=>{
document.getElementById(`con${v}`).innerHTML = ""
})
},
getTitle() {
let curTime = getCurDate();
return `${curTime.year}年${curTime.month}月展板点播TOP10`;
},
initScroll() {
let _this = this;
this.box = document.getElementById("bodyContent");
this.con1 = document.getElementById("con1");
for (let i = 2; i < 7; i++) {
let con = document.getElementById(`con${i}`);
con.innerHTML = _this.con1.innerHTML;
}
this.timer = setInterval(_this.scrollUp, _this.speed);
},
scrollUp() {
if (this.box.scrollTop >= this.con1.scrollHeight) {
this.box.scrollTop = 0;
} else {
this.box.scrollTop++;
}
},
Ups() {
let _this = this;
this.timer = setInterval(_this.scrollUp, _this.speed);
},
Stops() {
clearInterval(this.timer);
},
},
watch: {
data() {
this.clearDom()
this.list = this.data;
if (this.list.length > 4) {
this.$nextTick(() => {
this.initScroll();
});
}
},
},
};
</script>
<style lang=scss>
</style>
src/views/screen.vue
View file @ fbf73fb8
<template>
<div class="screen-container">
<div class="page-title">
<p>- 播放数据统计 -</p>
</div>
<div class="user-info">
<!-- <img src="@/assets/images/screen/user.png" alt="" class="icon-user" />
<span class="user-name">中国国家博物馆</span>
<img src="@/assets/images/screen/close.png" alt="" class="signup" />
<img
src="@/assets/images/screen/manager.png"
@click="goManager"
alt=""
class="manager"
/> -->
</div>
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list" :data="areaList"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums :areaCode="areaCode"></borderNums>
<mapDiv @changeAreaCode="changeAreaCode"></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list" :data="top10List"></top10>
</div>
<div class="echartspanel">
<demand
ref="interactEcharts"
class="echarts-box left"
:data="interactEcharts"
@itemClick="itemClick"
>
</demand>
<interaction
ref="trendEcharts"
class="echarts-box right"
:data="trendEcharts"
@itemClick="itemClick"
></interaction>
</div>
<!-- 弹框 -->
<m-dialog
ref="mdialog"
:is-show.sync="showDialog"
:dialog-data="dialogData"
/>
</div>
</template>
<script>
import {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums,
MDialog,
} from "../components";
import { getCurDate } from "../components/util.time.js";
export default {
data() {
return {
showDialog: false,
dialogData: {}, // 1 是互动频次弹框 2 是趋势图弹框
trendList: [],
trendEcharts: {},
interactList: [],
interactEcharts: {},
areaList: [],
top10List: [],
areaCode:10000
};
},
components: {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums,
MDialog,
},
mounted() {
let clientWidth = document.body.clientWidth;
clientWidth = clientWidth > 1920 ? 1920 : clientWidth;
let fontSize = (clientWidth / 1920) * 100;
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
this.getDataOfEcharts(100000);
this.getDataOfList(100000);
},
methods: {
changeAreaCode(areaCode) {
this.areaCode = areaCode
this.getDataOfList(areaCode);
this.getDataOfEcharts(areaCode)
},
// 接收柱状图传来的数据
itemClick(params) {
// let type = "";
// 互动
if (params.type == "1") {
// type = "interact";
this.dialogData = {
data: this.interactEcharts,
list: this.interactList,
};
} else if (params.type == "2") {
// type = "trend";
// 趋势
this.dialogData = {
data: this.trendEcharts,
list: this.trendList,
};
}
this.dialogData = Object.assign(this.dialogData, params);
this.showDialog = true;
},
goManager() {
location.href = "http://121.4.56.121:84";
},
getDataOfList(areaCode) {
let requestparams = {};
requestparams._index = 1;
requestparams._size = 10;
requestparams.areaCode = Number(areaCode);
this.getTableList("area", requestparams);
this.getTableList("top10", requestparams);
},
getDataOfEcharts(areaCode) {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
this.getPageList("interact", frequencyDate,areaCode); // 互动
this.getPageList("trend", frequencyDate,areaCode); //趋势
},
getTableList(type, requestparams) {
let httpUrl = "";
let _this = this;
if (type === "top10") {
httpUrl = `tBoardStatistic/getBoardRankPageList`;
}
if (type === "area") {
httpUrl = `tBoardStatistic/getBoardDistrictPageList`;
}
_this
.$shttp ({
method: "post",
url: httpUrl,
authType: _this.backToken,
},
requestparams
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this[`${type}List`] = res.data.data.records;
} else {
_this[`${type}List`] = [];
}
} else {
_this[`${type}List`] = [];
}
})
.catch((err) => {
_this[`${type}List`] = [];
_this.$message.error(err.message);
});
},
getPageList(type, frequencyDate,areaCode) {
let httpUrl = "";
let _this = this;
if (type === "interact") {
httpUrl = `tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=${frequencyDate}&areaCode=${areaCode}`;
}
if (type === "trend") {
httpUrl = `tBoardStatistic/getBoardTrendPageList?playDate=${frequencyDate}&areaCode=${areaCode}`;
}
_this
.$shttp ({
method: "post",
url: `${httpUrl}`,
authType: _this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this.setDataWithSus(type, res.data.data);
} else {
_this.setDataWithErr(type);
}
} else {
_this.setDataWithErr(type);
}
})
.catch((err) => {
_this.$message.error(err.message);
_this.setDataWithErr(type);
});
},
setDataWithSus(type, data) {
this[`${type}Echarts`] = {};
this[`${type}List`] = data.page.records;
this[`${type}Echarts`].yAxisData = data.cntList;
if (type == "interact") {
this[`${type}Echarts`].xAxisData = data.organList;
}
if (type == "trend") {
this[`${type}Echarts`].xAxisData = data.dateList;
}
let _this = this;
setTimeout(() => {
_this.$refs[`${type}Echarts`].init();
}, 1000);
},
setDataWithErr(type) {
this[`${type}Echarts`] = {};
this[`${type}List`] = [];
},
},
};
</script>
<style lang="scss">
.screen-container {
::-webkit-scrollbar {
width: 8px;
height: 10px;
//background-color: rgba(255, 255, 255, 0.2) !important;
}
width: 100%;
height: 100%;
overflow: hidden;
background-color: #08214c;
/*background: url("/images/screen/bg.png") no-repeat;*/
background: url("~@/assets/images/screen/bg@1x.png") no-repeat;
background-size: 100% 100%;
padding: 0 0.32rem;
box-sizing: border-box;
.page-title {
width: 100%;
height: 0.67rem;
background: url("~@/assets/images/screen/top_bg.png") no-repeat;
background-size: 100% 100%;
p {
font-size: 0.32rem;
color: #62baff;
position: absolute;
left: 50%;
transform: translate(-50%, 0.1rem);
margin: 0;
}
}
.user-info {
position: absolute;
right: 0.56rem;
top: 0.31rem;
display: flex;
align-items: center;
.icon-user,
.signup {
width: 0.28rem;
height: 0.28rem;
}
.user-name {
font-size: 0.18rem;
color: #4ffffd;
margin-left: 0.12rem;
}
.signup {
margin-left: 0.4rem;
}
.manager {
cursor: pointer;
width: 0.32rem;
height: 0.32rem;
margin-left: 0.2rem;
}
}
.echartspanel {
height: 34vh;
width: 100%;
bottom: 0rem;
padding: 0.24rem 0;
box-sizing: border-box;
.echarts-box {
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left {
padding-right: 0.12rem;
float: left;
}
&.right {
padding-left: 0.12rem;
float: right;
}
}
}
.middel-part {
display: flex;
margin-top: 4.16vh;
height: 56.48vh;
justify-content: space-between;
.table-list {
width: 25vw;
height: 100%;
}
}
.table-list {
.list-of-body {
padding-top: 0.7rem;
height: 100%;
box-sizing: border-box;
ul {
display: flex;
align-items: flex-start;
font-size: 0.16rem;
padding-left: 0.24rem;
box-sizing: border-box;
li {
line-height: 0.4rem;
&.f1 {
width: 10%;
}
&.f2 {
width: 20%;
}
&.f3 {
width: 30%;
}
&.f5 {
width: 50%;
}
&.f6 {
width: 60%;
}
&.f7 {
width: 70%;
}
div.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.body-title {
color: #62baff;
margin-bottom: 0.07rem;
}
.body-content {
height: calc(100% - 0.8rem);
overflow-y: hidden;
.body-item {
height: 0.4rem;
background-color: rgba(98, 186, 255, 0.2);
margin-bottom: 0.04rem;
color: #4efffd;
}
}
}
}
.common-title {
.icon-title {
position: absolute;
top: 0.1rem;
left: 0.1rem;
width: 0.4rem;
}
.title {
position: absolute;
top: 0.2rem;
left: 0.52rem;
font-size: 0.2rem;
line-height: 0.2rem;
color: #4efffd;
}
.bg {
position: absolute;
width: calc(100% - 0.48rem);
left: 0.24rem;
top: 0.24rem;
}
}
.map-container {
flex: 1;
height: 100%;
position: relative;
padding-top: 0.7rem;
box-sizing: border-box;
}
}
</style>
<template>
<div class="screen-container">
<div class="page-title">
<p>- 播放数据统计 -</p>
</div>
<div class="user-info">
<!-- <img src="@/assets/images/screen/user.png" alt="" class="icon-user" />
<span class="user-name">中国国家博物馆</span>
<img src="@/assets/images/screen/close.png" alt="" class="signup" />
<img
src="@/assets/images/screen/manager.png"
@click="goManager"
alt=""
class="manager"
/> -->
</div>
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list" :data="areaList"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums :areaCode="areaCode"></borderNums>
<mapDiv @changeAreaCode="changeAreaCode"></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list" :data="top10List"></top10>
</div>
<div class="echartspanel">
<demand
ref="interactEcharts"
class="echarts-box left"
:data="interactEcharts"
@itemClick="itemClick"
>
</demand>
<interaction
ref="trendEcharts"
class="echarts-box right"
:data="trendEcharts"
@itemClick="itemClick"
></interaction>
</div>
<!-- 弹框 -->
<m-dialog
ref="mdialog"
:is-show.sync="showDialog"
:dialog-data="dialogData"
/>
</div>
</template>
<script>
import {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums,
MDialog,
} from "../components";
import { getCurDate } from "../components/util.time.js";
export default {
data() {
return {
showDialog: false,
dialogData: {}, // 1 是互动频次弹框 2 是趋势图弹框
trendList: [],
trendEcharts: {},
interactList: [],
interactEcharts: {},
areaList: [],
top10List: [],
areaCode:10000
};
},
components: {
demand,
interaction,
areas,
top10,
mapDiv,
borderNums,
MDialog,
},
mounted() {
let clientWidth = document.body.clientWidth;
clientWidth = clientWidth > 1920 ? 1920 : clientWidth;
let fontSize = (clientWidth / 1920) * 100;
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
this.getDataOfEcharts(100000);
this.getDataOfList(100000);
},
methods: {
changeAreaCode(areaCode) {
this.areaCode = areaCode
this.getDataOfList(areaCode);
this.getDataOfEcharts(areaCode)
},
// 接收柱状图传来的数据
itemClick(params) {
// let type = "";
// 互动
if (params.type == "1") {
// type = "interact";
this.dialogData = {
data: this.interactEcharts,
list: this.interactList,
};
} else if (params.type == "2") {
// type = "trend";
// 趋势
this.dialogData = {
data: this.trendEcharts,
list: this.trendList,
};
}
this.dialogData = Object.assign(this.dialogData, params);
this.showDialog = true;
},
goManager() {
location.href = "http://121.4.56.121:84";
},
getDataOfList(areaCode) {
let requestparams = {};
requestparams._index = 1;
requestparams._size = 10;
requestparams.areaCode = Number(areaCode);
this.getTableList("area", requestparams);
this.getTableList("top10", requestparams);
},
getDataOfEcharts(areaCode) {
let curTime = getCurDate();
let frequencyDate = curTime.year + curTime.month;
this.getPageList("interact", frequencyDate,areaCode); // 互动
this.getPageList("trend", frequencyDate,areaCode); //趋势
},
getTableList(type, requestparams) {
let httpUrl = "";
let _this = this;
if (type === "top10") {
httpUrl = `tBoardStatistic/getBoardRankPageList`;
}
if (type === "area") {
httpUrl = `tBoardStatistic/getBoardDistrictPageList`;
}
_this
.$shttp ({
method: "post",
url: httpUrl,
authType: _this.backToken,
},
requestparams
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this[`${type}List`] = res.data.data.records;
} else {
_this[`${type}List`] = [];
}
} else {
_this[`${type}List`] = [];
}
})
.catch((err) => {
_this[`${type}List`] = [];
_this.$message.error(err.message);
});
},
getPageList(type, frequencyDate,areaCode) {
let httpUrl = "";
let _this = this;
if (type === "interact") {
httpUrl = `tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=${frequencyDate}&areaCode=${areaCode}`;
}
if (type === "trend") {
httpUrl = `tBoardStatistic/getBoardTrendPageList?playDate=${frequencyDate}&areaCode=${areaCode}`;
}
_this
.$shttp ({
method: "post",
url: `${httpUrl}`,
authType: _this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
_this.setDataWithSus(type, res.data.data);
} else {
_this.setDataWithErr(type);
}
} else {
_this.setDataWithErr(type);
}
})
.catch((err) => {
_this.$message.error(err.message);
_this.setDataWithErr(type);
});
},
setDataWithSus(type, data) {
this[`${type}Echarts`] = {};
this[`${type}List`] = data.page.records;
this[`${type}Echarts`].yAxisData = data.cntList;
if (type == "interact") {
this[`${type}Echarts`].xAxisData = data.organList;
}
if (type == "trend") {
this[`${type}Echarts`].xAxisData = data.dateList;
}
let _this = this;
setTimeout(() => {
_this.$refs[`${type}Echarts`].init();
}, 1000);
},
setDataWithErr(type) {
this[`${type}Echarts`] = {};
this[`${type}List`] = [];
},
},
};
</script>
<style lang="scss">
.screen-container {
::-webkit-scrollbar {
width: 8px;
height: 10px;
//background-color: rgba(255, 255, 255, 0.2) !important;
}
width: 100%;
height: 100%;
overflow: hidden;
background-color: #08214c;
/*background: url("/images/screen/bg.png") no-repeat;*/
background: url("~@/assets/images/screen/bg@1x.png") no-repeat;
background-size: 100% 100%;
padding: 0 0.32rem;
box-sizing: border-box;
.page-title {
width: 100%;
height: 0.67rem;
background: url("~@/assets/images/screen/top_bg.png") no-repeat;
background-size: 100% 100%;
p {
font-size: 0.32rem;
color: #62baff;
position: absolute;
left: 50%;
transform: translate(-50%, 0.1rem);
margin: 0;
}
}
.user-info {
position: absolute;
right: 0.56rem;
top: 0.31rem;
display: flex;
align-items: center;
.icon-user,
.signup {
width: 0.28rem;
height: 0.28rem;
}
.user-name {
font-size: 0.18rem;
color: #4ffffd;
margin-left: 0.12rem;
}
.signup {
margin-left: 0.4rem;
}
.manager {
cursor: pointer;
width: 0.32rem;
height: 0.32rem;
margin-left: 0.2rem;
}
}
.echartspanel {
height: 34vh;
width: 100%;
bottom: 0rem;
padding: 0.24rem 0;
box-sizing: border-box;
.echarts-box {
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left {
padding-right: 0.12rem;
float: left;
}
&.right {
padding-left: 0.12rem;
float: right;
}
}
}
.middel-part {
display: flex;
margin-top: 4.16vh;
height: 56.48vh;
justify-content: space-between;
.table-list {
width: 25vw;
height: 100%;
}
}
.table-list {
.list-of-body {
padding-top: 0.7rem;
height: 100%;
box-sizing: border-box;
ul {
display: flex;
align-items: flex-start;
font-size: 0.16rem;
padding-left: 0.24rem;
box-sizing: border-box;
li {
line-height: 0.4rem;
&.f1 {
width: 10%;
}
&.f2 {
width: 20%;
}
&.f3 {
width: 30%;
}
&.f5 {
width: 50%;
}
&.f6 {
width: 60%;
}
&.f7 {
width: 70%;
}
div.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.body-title {
color: #62baff;
margin-bottom: 0.07rem;
}
.body-content {
height: calc(100% - 0.8rem);
overflow-y: hidden;
.body-item {
height: 0.4rem;
background-color: rgba(98, 186, 255, 0.2);
margin-bottom: 0.04rem;
color: #4efffd;
}
}
}
}
.common-title {
.icon-title {
position: absolute;
top: 0.1rem;
left: 0.1rem;
width: 0.4rem;
}
.title {
position: absolute;
top: 0.2rem;
left: 0.52rem;
font-size: 0.2rem;
line-height: 0.2rem;
color: #4efffd;
}
.bg {
position: absolute;
width: calc(100% - 0.48rem);
left: 0.24rem;
top: 0.24rem;
}
}
.map-container {
flex: 1;
height: 100%;
position: relative;
padding-top: 0.7rem;
box-sizing: border-box;
}
}
</style>
src/views/user/components/commitTab.vue
View file @ fbf73fb8
......@@ -108,7 +108,7 @@
<img src="@/assets/images/applets/tip.png" alt />
<span>
最多支持上传
<b>3</b> 段视频,每段大小不能超过 <b>10MB</b>。
<b>3</b> 段视频,每段大小不能超过 <b>30MB</b>。
</span>
</div>
</div>
......@@ -146,6 +146,7 @@
</div>
<div class="field-content">
<van-field
@input="form.content=form.content.replace(regStr,'');"
required
class="field-textarea"
type="textarea"
......@@ -168,6 +169,7 @@ import util from "@/utils/index.js";
export default {
data() {
return {
regStr: /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
form: {
username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
......@@ -325,12 +327,12 @@ export default {
beforeVideo(file) {
let isOver = true
if(Array.isArray(file)){
isOver = file.every(item=>item <= 10*1024*1024)
isOver = file.every(item=>item <= 30*1024*1024)
}else{
isOver = file.size <= 10*1024*1024
isOver = file.size <= 30*1024*1024
}
if(!isOver){
this.$toast.fail("上传文件大小不能超过 10MB");
this.$toast.fail("上传文件大小不能超过 30MB");
return false
}else{
return true
......@@ -375,6 +377,7 @@ export default {
})
}else{
this.$toast(res.data.message)
// this.deleteInterface()
}
})
.catch(function (err) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment