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> <template>
<div class="dashbord-list"> <div class="dashbord-list">
<p class="tip"> <p class="tip">
<span class="tip-title">页面说明:</span> <span class="tip-title">页面说明:</span>
<span <span
>可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span >可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
> >
</p> </p>
<ul> <ul>
<li v-for="(item, index) in list" :key="index"> <li v-for="(item, index) in list" :key="index">
<div class="title-name">{{ item.label }}</div> <div class="title-name">{{ item.label }}</div>
<img :src="getImg(item.urlName)" alt="" /> <img :src="getImg(item.urlName)" alt="" />
<div class="title"> <div class="title">
<span> <span>
<a class="num">{{ item.num }}</a> <a class="num">{{ item.num }}</a>
<a class="unit">{{ item.unit }}</a> <a class="unit">{{ item.unit }}</a>
</span> </span>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "nums", name: "nums",
data() { data() {
return { return {
data: [ data: [
{ {
label: "总播放量", label: "总播放量",
num: 0, num: 0,
unit: "次", unit: "次",
urlName: "play", urlName: "play",
feild: "playCnt", feild: "playCnt",
}, },
{ {
label: "单位组织", label: "单位组织",
num: 0, num: 0,
unit: "家", unit: "家",
urlName: "org", urlName: "org",
feild: "orgCnt", feild: "orgCnt",
}, },
{ {
label: "展板总量", label: "展板总量",
num: 0, num: 0,
unit: "个", unit: "个",
urlName: "boardsTotal", urlName: "boardsTotal",
feild: "boardCnt", feild: "boardCnt",
}, },
{ {
label: "互动总量", label: "互动总量",
num: 0, num: 0,
unit: "次", unit: "次",
urlName: "interaction", urlName: "interaction",
feild: "interactionCnt", feild: "interactionCnt",
}, },
], ],
list: [], list: [],
}; };
}, },
mounted() { mounted() {
this.getList() this.getList()
}, },
methods: { methods: {
getImg(imgUrl) { getImg(imgUrl) {
return require("@/assets/overview/" + imgUrl + ".png"); return require("@/assets/overview/" + imgUrl + ".png");
}, },
getList() { getList() {
this.$https({ this.$https({
method: "post", method: "post",
url: "tBoardStatistic/getBoardSurvey", url: "tBoardStatistic/getBoardSurvey",
authType: this.backToken, authType: this.backToken,
}) })
.then((res) => { .then((res) => {
if (res.status == 200) { // console.log(res.data.data)
if (res.data.resultCode == 200) { if (res.status == 200) {
let resData = res.data.data; if (res.data.resultCode == 200) {
this.list = [...this.data].map((v) => { let resData = res.data.data;
v['num'] = resData[v['feild']]; this.list = [...this.data].map((v) => {
return v v['num'] = resData[v['feild']];
}); return v
} else { });
this.list = [...this.data]; } else {
} this.list = [...this.data];
} else { }
this.list = [...this.data]; } else {
} this.list = [...this.data];
}) }
.catch((err) => { })
this.$message.error(err.message); .catch((err) => {
}); this.$message.error(err.message);
}, });
}, },
}; },
</script> };
</script>
<style lang="less">
.dashbord-list { <style lang="less">
width: 100%; .dashbord-list {
position: absolute; width: 100%;
padding: 0 10px; position: absolute;
z-index: 100; padding: 0 10px;
.tip { z-index: 100;
color: @font-color; .tip {
.tip-title { color: @font-color;
font-weight: bold; .tip-title {
padding-right: 10px; font-weight: bold;
} padding-right: 10px;
} }
ul { }
display: flex; ul {
font-size: 0; display: flex;
justify-content: space-around; font-size: 0;
li { justify-content: space-around;
position: relative; li {
width: 9vw; position: relative;
margin-top: 15px; width: 9vw;
} margin-top: 15px;
img { }
width: 100%; img {
} width: 100%;
.title-name { }
font-size: 18px; .title-name {
color: @font-color; font-size: 18px;
position: absolute; color: @font-color;
top: -8px; position: absolute;
right: 0; top: -8px;
} right: 0;
.title { }
position: absolute; .title {
right: 0.2rem; position: absolute;
bottom: 5px; right: 0.2rem;
color: @party-white; bottom: 5px;
.num { color: @party-white;
font-size: 28px; .num {
} font-size: 28px;
.unit { }
font-size: 16px; .unit {
margin-left: 5px; font-size: 16px;
} margin-left: 5px;
} }
} }
} }
</style> }
</style>
src/page/statistics/components/maps.vue
View file @ 481b980f
<template> <template>
<div class="map-box"> <div class="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()" <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span >返回</span
> >
<div id="mapDiv"></div> <div id="mapDiv"></div>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios"; import axios from "axios";
import echarts from "echarts"; import echarts from "echarts";
export default { export default {
name: "maps", name: "maps",
data() { data() {
return { return {
dataList: [], dataList: [],
show: "province", show: "province",
parentInfo: [ parentInfo: [
{ {
cityName: "全国", cityName: "全国",
code: 100000, code: 100000,
}, },
], ],
}; };
}, },
mounted() { mounted() {
this.initData(100000); this.initData(100000);
}, },
methods: { methods: {
getList(type, areaCode) { getList(type, areaCode) {
let _this = this; let _this = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let httpUrl = ""; let httpUrl = "";
let dataList = []; let dataList = [];
if (type === "china") { if (type === "china") {
httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList"; httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
} }
if (type === "map") { if (type === "map") {
httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`; httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
} }
_this _this
.$https({ .$https({
method: "post", method: "post",
url: httpUrl, url: httpUrl,
}) authType: _this.backToken,
.then((res) => { })
if (res.status == 200) { .then((res) => {
if (res.data.resultCode == 200) { if (res.status == 200) {
dataList = res.data.data; if (res.data.resultCode == 200) {
} else { dataList = res.data.data;
dataList = []; } else {
} dataList = [];
} else { }
dataList = []; } else {
} dataList = [];
resolve(dataList); }
}) resolve(dataList);
.catch((err) => { })
this.$message.error(err.message); .catch((err) => {
resolve([]); this.$message.error(err.message);
}); resolve([]);
}); });
}, });
initData(adcode) { },
Promise.all([ initData(adcode) {
this.getGeoJson(adcode), Promise.all([
this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode), this.getGeoJson(adcode),
]).then((res) => { this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
let features = res[0].features; ]).then((res) => {
let json = res[1]; let features = res[0].features;
let flen = features.length; let json = res[1];
let jlen = json.length; let flen = features.length;
for (let i = 0; i < flen; i++) { let jlen = json.length;
for (let j = 0; j < jlen; j++) { for (let i = 0; i < flen; i++) {
let jName = json[j].name.substring(0, 2); for (let j = 0; j < jlen; j++) {
if (features[i].properties.name.indexOf(jName) != -1) { let jName = json[j].name.substring(0, 2);
features[i].properties.value = json[j].value; if (features[i].properties.name.indexOf(jName) != -1) {
break; features[i].properties.value = json[j].value;
} break;
} }
} }
this.getMapData({ features: features }); }
}); this.getMapData({ features: features });
}, });
init(mapData) { },
let option = { init(mapData) {
tooltip: { let option = {
// triggerOn: "click", tooltip: {
formatter: function (e, t, n) { // triggerOn: "click",
return 0.5 == e.value formatter: function (e, t, n) {
? e.name + "：播放量" return 0.5 == e.value
: e.seriesName + "<br />" + e.name + "：" + e.value; ? e.name + "：播放量"
}, : e.seriesName + "<br />" + e.name + "：" + e.value;
}, },
visualMap: [ },
{ visualMap: [
dimension: 0, {
right: 20, dimension: 0,
bottom: 20, right: 20,
itemWidth: 16, bottom: 20,
itemHeight: "200px", itemWidth: 16,
orient: "horizontal", itemHeight: "200px",
text: ["由高到低", "播放量"], orient: "horizontal",
backgroundColor: "rgba(0,28,66,0.6)", text: ["由高到低", "播放量"],
padding: [15, 10], backgroundColor: "rgba(0,28,66,0.6)",
textStyle: { padding: [15, 10],
color: "rgba(255,255,255,1)", textStyle: {
}, color: "rgba(255,255,255,1)",
inRange: { },
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"], inRange: {
}, color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
}, },
], },
geo: { ],
map: this.parentInfo.length === 1 ? "china" : "map", geo: {
roam: !1, map: this.parentInfo.length === 1 ? "china" : "map",
roam: true, //是否开启平游或缩放 roam: !1,
scaleLimit: { roam: true, //是否开启平游或缩放
//滚轮缩放的极限控制 scaleLimit: {
min: 1 //滚轮缩放的极限控制
}, min: 1
},
zoom: 1.1,
top: 100, zoom: 1.1,
left: "20%", top: 100,
label: { left: "20%",
normal: { label: {
show: !0, normal: {
fontSize: "12", show: !0,
color: "#fff", fontSize: "12",
formatter: (p) => { color: "#fff",
switch (p.name) { formatter: (p) => {
case "内蒙古自治区": switch (p.name) {
p.name = "内蒙古"; case "内蒙古自治区":
break; p.name = "内蒙古";
case "西藏自治区": break;
p.name = "西藏"; case "西藏自治区":
break; p.name = "西藏";
case "新疆维吾尔自治区": break;
p.name = "新疆"; case "新疆维吾尔自治区":
break; p.name = "新疆";
case "宁夏回族自治区": break;
p.name = "宁夏"; case "宁夏回族自治区":
break; p.name = "宁夏";
case "广西壮族自治区": break;
p.name = "广西"; case "广西壮族自治区":
break; p.name = "广西";
case "香港特别行政区": break;
p.name = "香港"; case "香港特别行政区":
break; p.name = "香港";
case "澳门特别行政区": break;
p.name = "澳门"; case "澳门特别行政区":
break; p.name = "澳门";
} break;
return p.name; }
}, return p.name;
}, },
}, },
itemStyle: { },
normal: { itemStyle: {
borderColor: "rgba(0, 0, 0, 0.2)", normal: {
}, borderColor: "rgba(0, 0, 0, 0.2)",
emphasis: { },
areaColor: "#f2d5ad", emphasis: {
shadowOffsetX: 0, areaColor: "#f2d5ad",
shadowOffsetY: 0, shadowOffsetX: 0,
borderWidth: 0, shadowOffsetY: 0,
}, borderWidth: 0,
}, },
regions: [ },
{ regions: [
name: "南海诸岛", {
itemStyle: { name: "南海诸岛",
// 隐藏地图 itemStyle: {
normal: { // 隐藏地图
opacity: 0, // 为 0 时不绘制该图形 normal: {
}, opacity: 0, // 为 0 时不绘制该图形
}, },
label: { },
show: false, // 隐藏文字 label: {
}, show: false, // 隐藏文字
}, },
], },
}, ],
series: [ },
{ series: [
name: "播放量", {
type: "map", name: "播放量",
geoIndex: 0, type: "map",
data: mapData, geoIndex: 0,
}, data: mapData,
], },
}; ],
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv")); };
echartsDiv.setOption(option); let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.on("click", this.echartsMapClick); echartsDiv.setOption(option);
}, echartsDiv.on("click", this.echartsMapClick);
handleBack() { },
if (this.parentInfo.length === 1) { handleBack() {
return; if (this.parentInfo.length === 1) {
} return;
this.parentInfo.pop(); }
this.initData(this.parentInfo[this.parentInfo.length - 1].code); this.parentInfo.pop();
}, this.initData(this.parentInfo[this.parentInfo.length - 1].code);
echartsMapClick(params) { },
if (!params.data) { echartsMapClick(params) {
return; if (!params.data) {
} return;
if (params.data.level === "district") { }
return false; if (params.data.level === "district") {
} return false;
let cityCode = params.data.cityCode; }
this.parentInfo.push({ let cityCode = params.data.cityCode;
cityName: params.data.name, this.parentInfo.push({
code: params.data.cityCode, cityName: params.data.name,
}); code: params.data.cityCode,
this.initData(cityCode); });
}, this.initData(cityCode);
getGeoJson(adcode) { },
return new Promise((resolve, reject) => { getGeoJson(adcode) {
axios({ return new Promise((resolve, reject) => {
method: "get", axios({
url: `static/feature/${adcode}_full.json`, method: "get",
}).then((res) => { url: `static/feature/${adcode}_full.json`,
let mapJson = { }).then((res) => {
features: res.data.features, let mapJson = {
}; features: res.data.features,
resolve(mapJson); };
}); resolve(mapJson);
}); });
}, });
getMapData(geoJson) { },
// 获取后台接口数据 getMapData(geoJson) {
let Json = geoJson.features; // 获取后台接口数据
let mapData = Json.map((item) => { let Json = geoJson.features;
return { let mapData = Json.map((item) => {
name: item.properties.name, return {
value: item.properties.value, name: item.properties.name,
level: item.properties.level, value: item.properties.value,
cityCode: item.properties.adcode, level: item.properties.level,
}; cityCode: item.properties.adcode,
}); };
let mapJson = {}; });
//geoJson必须这种格式 let mapJson = {};
mapJson.features = Json; //geoJson必须这种格式
//去渲染echarts mapJson.features = Json;
console.log(mapData) //去渲染echarts
this.initEcharts(mapData, mapJson); // console.log(mapData)
}, this.initEcharts(mapData, mapJson);
initEcharts(mapData, mapJson) { },
echarts.registerMap( initEcharts(mapData, mapJson) {
this.parentInfo.length === 1 ? "china" : "map", echarts.registerMap(
mapJson this.parentInfo.length === 1 ? "china" : "map",
); mapJson
this.init(mapData); );
}, this.init(mapData);
}, },
}; },
</script> };
</script>
<style lang="less">
.map-box { <style lang="less">
width: 100%; .map-box {
height: 100%; width: 100%;
#back { height: 100%;
position: absolute; #back {
font-size: 16px; position: absolute;
color: #775858; font-size: 16px;
left: 60px; color: #775858;
top: 140px; left: 60px;
cursor: pointer; top: 140px;
z-index: 99; cursor: pointer;
&:hover { z-index: 99;
color:#9B1E23; &:hover {
} color:#9B1E23;
} }
#mapDiv { }
width: 100%; #mapDiv {
height: 100%; width: 100%;
} height: 100%;
} }
</style> }
</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