Skip to content

N
national_museum_vod
Commit 481b980f authored by Your Name's avatar Your Name
Browse files
Options

大屏显示

parent f9ecf430
Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 429 deletions
src/page/statistics/components/borderNums.vue
View file @ 481b980f
<template>
<div class="dashbord-list">
<p class="tip">
<span class="tip-title">页面说明:</span>
<span
>可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
>
</p>
<ul>
<li v-for="(item, index) in list" :key="index">
<div class="title-name">{{ item.label }}</div>
<img :src="getImg(item.urlName)" alt="" />
<div class="title">
<span>
<a class="num">{{ item.num }}</a>
<a class="unit">{{ item.unit }}</a>
</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "nums",
data() {
return {
data: [
{
label: "总播放量",
num: 0,
unit: "次",
urlName: "play",
feild: "playCnt",
},
{
label: "单位组织",
num: 0,
unit: "家",
urlName: "org",
feild: "orgCnt",
},
{
label: "展板总量",
num: 0,
unit: "个",
urlName: "boardsTotal",
feild: "boardCnt",
},
{
label: "互动总量",
num: 0,
unit: "次",
urlName: "interaction",
feild: "interactionCnt",
},
],
list: [],
};
},
mounted() {
this.getList()
},
methods: {
getImg(imgUrl) {
return require("@/assets/overview/" + imgUrl + ".png");
},
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardSurvey",
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
let resData = res.data.data;
this.list = [...this.data].map((v) => {
v['num'] = resData[v['feild']];
return v
});
} else {
this.list = [...this.data];
}
} else {
this.list = [...this.data];
}
})
.catch((err) => {
this.$message.error(err.message);
});
},
},
};
</script>
<style lang="less">
.dashbord-list {
width: 100%;
position: absolute;
padding: 0 10px;
z-index: 100;
.tip {
color: @font-color;
.tip-title {
font-weight: bold;
padding-right: 10px;
}
}
ul {
display: flex;
font-size: 0;
justify-content: space-around;
li {
position: relative;
width: 9vw;
margin-top: 15px;
}
img {
width: 100%;
}
.title-name {
font-size: 18px;
color: @font-color;
position: absolute;
top: -8px;
right: 0;
}
.title {
position: absolute;
right: 0.2rem;
bottom: 5px;
color: @party-white;
.num {
font-size: 28px;
}
.unit {
font-size: 16px;
margin-left: 5px;
}
}
}
}
</style>
<template>
<div class="dashbord-list">
<p class="tip">
<span class="tip-title">页面说明:</span>
<span
>可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
>
</p>
<ul>
<li v-for="(item, index) in list" :key="index">
<div class="title-name">{{ item.label }}</div>
<img :src="getImg(item.urlName)" alt="" />
<div class="title">
<span>
<a class="num">{{ item.num }}</a>
<a class="unit">{{ item.unit }}</a>
</span>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "nums",
data() {
return {
data: [
{
label: "总播放量",
num: 0,
unit: "次",
urlName: "play",
feild: "playCnt",
},
{
label: "单位组织",
num: 0,
unit: "家",
urlName: "org",
feild: "orgCnt",
},
{
label: "展板总量",
num: 0,
unit: "个",
urlName: "boardsTotal",
feild: "boardCnt",
},
{
label: "互动总量",
num: 0,
unit: "次",
urlName: "interaction",
feild: "interactionCnt",
},
],
list: [],
};
},
mounted() {
this.getList()
},
methods: {
getImg(imgUrl) {
return require("@/assets/overview/" + imgUrl + ".png");
},
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardSurvey",
authType: this.backToken,
})
.then((res) => {
// console.log(res.data.data)
if (res.status == 200) {
if (res.data.resultCode == 200) {
let resData = res.data.data;
this.list = [...this.data].map((v) => {
v['num'] = resData[v['feild']];
return v
});
} else {
this.list = [...this.data];
}
} else {
this.list = [...this.data];
}
})
.catch((err) => {
this.$message.error(err.message);
});
},
},
};
</script>
<style lang="less">
.dashbord-list {
width: 100%;
position: absolute;
padding: 0 10px;
z-index: 100;
.tip {
color: @font-color;
.tip-title {
font-weight: bold;
padding-right: 10px;
}
}
ul {
display: flex;
font-size: 0;
justify-content: space-around;
li {
position: relative;
width: 9vw;
margin-top: 15px;
}
img {
width: 100%;
}
.title-name {
font-size: 18px;
color: @font-color;
position: absolute;
top: -8px;
right: 0;
}
.title {
position: absolute;
right: 0.2rem;
bottom: 5px;
color: @party-white;
.num {
font-size: 28px;
}
.unit {
font-size: 16px;
margin-left: 5px;
}
}
}
}
</style>
src/page/statistics/components/maps.vue
View file @ 481b980f
<template>
<div class="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span
>
<div id="mapDiv"></div>
</div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
export default {
name: "maps",
data() {
return {
dataList: [],
show: "province",
parentInfo: [
{
cityName: "全国",
code: 100000,
},
],
};
},
mounted() {
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
.$https({
method: "post",
url: httpUrl,
})
.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 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,
right: 20,
bottom: 20,
itemWidth: 16,
itemHeight: "200px",
orient: "horizontal",
text: ["由高到低", "播放量"],
backgroundColor: "rgba(0,28,66,0.6)",
padding: [15, 10],
textStyle: {
color: "rgba(255,255,255,1)",
},
inRange: {
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
},
},
],
geo: {
map: this.parentInfo.length === 1 ? "china" : "map",
roam: !1,
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1
},
zoom: 1.1,
top: 100,
left: "20%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
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;
},
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "#f2d5ad",
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);
echartsDiv.on("click", this.echartsMapClick);
},
handleBack() {
if (this.parentInfo.length === 1) {
return;
}
this.parentInfo.pop();
this.initData(this.parentInfo[this.parentInfo.length - 1].code);
},
echartsMapClick(params) {
if (!params.data) {
return;
}
if (params.data.level === "district") {
return false;
}
let cityCode = params.data.cityCode;
this.parentInfo.push({
cityName: params.data.name,
code: params.data.cityCode,
});
this.initData(cityCode);
},
getGeoJson(adcode) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: `static/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
console.log(mapData)
this.initEcharts(mapData, mapJson);
},
initEcharts(mapData, mapJson) {
echarts.registerMap(
this.parentInfo.length === 1 ? "china" : "map",
mapJson
);
this.init(mapData);
},
},
};
</script>
<style lang="less">
.map-box {
width: 100%;
height: 100%;
#back {
position: absolute;
font-size: 16px;
color: #775858;
left: 60px;
top: 140px;
cursor: pointer;
z-index: 99;
&:hover {
color:#9B1E23;
}
}
#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 axios from "axios";
import echarts from "echarts";
export default {
name: "maps",
data() {
return {
dataList: [],
show: "province",
parentInfo: [
{
cityName: "全国",
code: 100000,
},
],
};
},
mounted() {
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
.$https({
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 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,
right: 20,
bottom: 20,
itemWidth: 16,
itemHeight: "200px",
orient: "horizontal",
text: ["由高到低", "播放量"],
backgroundColor: "rgba(0,28,66,0.6)",
padding: [15, 10],
textStyle: {
color: "rgba(255,255,255,1)",
},
inRange: {
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
},
},
],
geo: {
map: this.parentInfo.length === 1 ? "china" : "map",
roam: !1,
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1
},
zoom: 1.1,
top: 100,
left: "20%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
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;
},
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "#f2d5ad",
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);
echartsDiv.on("click", this.echartsMapClick);
},
handleBack() {
if (this.parentInfo.length === 1) {
return;
}
this.parentInfo.pop();
this.initData(this.parentInfo[this.parentInfo.length - 1].code);
},
echartsMapClick(params) {
if (!params.data) {
return;
}
if (params.data.level === "district") {
return false;
}
let cityCode = params.data.cityCode;
this.parentInfo.push({
cityName: params.data.name,
code: params.data.cityCode,
});
this.initData(cityCode);
},
getGeoJson(adcode) {
return new Promise((resolve, reject) => {
axios({
method: "get",
url: `static/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
// console.log(mapData)
this.initEcharts(mapData, mapJson);
},
initEcharts(mapData, mapJson) {
echarts.registerMap(
this.parentInfo.length === 1 ? "china" : "map",
mapJson
);
this.init(mapData);
},
},
};
</script>
<style lang="less">
.map-box {
width: 100%;
height: 100%;
#back {
position: absolute;
font-size: 16px;
color: #775858;
left: 60px;
top: 140px;
cursor: pointer;
z-index: 99;
&:hover {
color:#9B1E23;
}
}
#mapDiv {
width: 100%;
height: 100%;
}
}
</style>
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