Commit 481b980f authored by Your Name's avatar Your Name

大屏显示

parent f9ecf430
<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>
This diff is collapsed.
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