Skip to content

N
national_museum_vod-H5
Commit b94f9aa7 authored by xulili's avatar xulili
Browse files
Options

大屏

parent 35d58fdb
Hide whitespace changes
Inline Side-by-side
Showing with 1395 additions and 1205 deletions
package-lock.json
View file @ b94f9aa7
...@@ -1726,6 +1726,16 @@ ...@@ -1726,6 +1726,16 @@
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
"dev": true "dev": true
}, },
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": { "cacache": {
"version": "13.0.1", "version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
...@@ -1752,6 +1762,53 @@ ...@@ -1752,6 +1762,53 @@
"unique-filename": "^1.1.1" "unique-filename": "^1.1.1"
} }
}, },
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"source-map": { "source-map": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
...@@ -1768,6 +1825,16 @@ ...@@ -1768,6 +1825,16 @@
"minipass": "^3.1.1" "minipass": "^3.1.1"
} }
}, },
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": { "terser-webpack-plugin": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
...@@ -1784,6 +1851,18 @@ ...@@ -1784,6 +1851,18 @@
"terser": "^4.6.12", "terser": "^4.6.12",
"webpack-sources": "^1.4.3" "webpack-sources": "^1.4.3"
} }
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
} }
} }
}, },
...@@ -11857,87 +11936,6 @@ ...@@ -11857,87 +11936,6 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.1.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
"integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": { "vue-router": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
......
src/components/MDialog.vue
View file @ b94f9aa7
<template> <template>
<div class="mask" v-if="isShow"> <div class="mask" v-if="isShow">
<div class="dialog-wrapper"> <div class="dialog-wrapper">
<div class="dialog-body table-list"> <div class="dialog-body table-list">
<triangle> <triangle>
<slot> <slot>
<div class="common-title"> <div class="common-title">
<img class="icon-title" src="/images/screen/boardsDemand.png" alt=""> <img
<span class="title">{{dialogData.title}}</span> class="icon-title"
<img class="bg" src="/images/screen/title02_bg.png" alt=""> src="/images/screen/boardsDemand.png"
<img src="/images/screen/icon-close.png" alt="" class="close" @click="closeDialog"> alt=""
</div> />
<dialog-bar-demand class="dialog-echarts-box" v-if="dialogData.type===1"/> <span class="title">{{ dialogData.title }}</span>
<dialog-line-interaction class="dialog-echarts-box" v-if="dialogData.type===2"/> <img class="bg" src="/images/screen/title02_bg.png" alt="" />
<div class="list-of-body"> <img
<ul class="body-title" v-if="dialogData.type===1"> src="/images/screen/icon-close.png"
<li class="f2">序号</li> alt=""
<li class="f5">机构名称</li> class="close"
<li class="f3">互动频次</li> @click="closeDialog"
</ul> />
<ul class="body-title" v-if="dialogData.type===2"> </div>
<li class="f2">序号</li> <dialog-bar-demand
<li class="f5">统计时间</li> class="dialog-echarts-box"
<li class="f3">点播总量</li> ref="echarts"
</ul> v-if="dialogData.type === 1"
<div class="body-content"> :data="dialogData.data"
<div v-if="dialogData.type===1"> />
<ul class="body-item" v-for="(item,index) in demandList" :key="index"> <dialog-line-interaction
<li class="f2">{{index+1}}</li> ref="echarts"
<li class="f5">{{item.name}}</li> class="dialog-echarts-box"
<li class="f3">{{item.num}}</li> v-if="dialogData.type === 2"
</ul> :data="dialogData.data"
</div> />
<div v-if="dialogData.type===2"> <div class="list-of-body">
<ul class="body-item" v-for="(item,index) in actionList" :key="index"> <ul class="body-title" v-if="dialogData.type === 1">
<li class="f2">{{index+1}}</li> <li class="f2">序号</li>
<li class="f5">{{item.dateTime}}</li> <li class="f5">机构名称</li>
<li class="f3">{{item.num}}</li> <li class="f3">互动频次</li>
</ul> </ul>
</div> <ul class="body-title" v-if="dialogData.type === 2">
</div> <li class="f2">序号</li>
</div> <li class="f5">统计时间</li>
</slot> <li class="f3">点播总量</li>
</triangle> </ul>
<div class="body-content">
</div> <div v-if="dialogData.type === 1">
<ul
class="body-item"
v-for="(item, index) in dialogData.list"
:key="index"
>
<li class="f2">{{ index + 1 }}</li>
<li class="f5">{{ item.organName }}</li>
<li class="f3">{{ item.frequencyCnt }}</li>
</ul>
</div>
<div v-if="dialogData.type === 2">
<ul
class="body-item"
v-for="(item, index) in dialogData.list"
:key="index"
>
<li class="f2">{{ index + 1 }}</li>
<li class="f5">{{ item.playDate }}</li>
<li class="f3">{{ item.playNumber }}</li>
</ul>
</div>
</div>
</div>
</slot>
</triangle>
</div> </div>
</div>
</div> </div>
</template> </template>
<script> <script>
import triangle from './slot/triangle' import triangle from "./slot/triangle";
import dialogBarDemand from './echarts/bar' import dialogBarDemand from "./echarts/bar";
import dialogLineInteraction from './echarts/line' import dialogLineInteraction from "./echarts/line";
export default { export default {
components:{ components: {
triangle, triangle,
dialogBarDemand, dialogBarDemand,
dialogLineInteraction dialogLineInteraction,
},
props: {
isShow: {
type: Boolean,
}, },
props: { dialogData: {
isShow: { type: Object,
type: Boolean default: () => {
},
dialogData: {
type: Object,
}
},
data() {
return { return {
demandList:[ data: {},
{ name:'北京市政府',num:'90'}, list: [],
{ name:'天津市政府',num:'85'}, type: 1,
{ name:'呼和浩特市政府',num:'83'}, };
{ name:'石家庄市政府',num:'75'}, },
{ name:'合肥市政府',num:'73'},
{ name:'哈尔滨市政府',num:'63'},
{ name:'廊坊市政府',num:'56'},
{ name:'临沂市政府',num:'52'},
{ name:'忻州市政府',num:'40'},
{ name:'黑龙江市政府',num:'30'},
],
actionList:[
{ dateTime:'2021/01/01',num:'18'},
{ dateTime:'2021/01/02',num:'19'},
{ dateTime:'2021/01/03',num:'22'},
{ dateTime:'2021/01/04',num:'23'},
{ dateTime:'2021/01/05',num:'25'},
{ dateTime:'2021/01/06',num:'26'},
{ dateTime:'2021/01/07',num:'28'},
{ dateTime:'2021/01/08',num:'30'},
{ dateTime:'2021/01/09',num:'36'},
{ dateTime:'2021/01/10',num:'38'},
{ dateTime:'2021/01/11',num:'40'},
{ dateTime:'2021/01/12',num:'42'},
{ dateTime:'2021/01/13',num:'44'},
{ dateTime:'2021/01/14',num:'45'},
{ dateTime:'2021/01/15',num:'46'},
{ dateTime:'2021/01/16',num:'47'},
{ dateTime:'2021/01/17',num:'49'},
{ dateTime:'2021/01/18',num:'52'},
{ dateTime:'2021/01/19',num:'56'},
{ dateTime:'2021/01/20',num:'59'},
{ dateTime:'2021/01/21',num:'63'},
{ dateTime:'2021/01/22',num:'66'},
{ dateTime:'2021/01/23',num:'68'},
{ dateTime:'2021/01/24',num:'69'},
{ dateTime:'2021/01/25',num:'73'},
{ dateTime:'2021/01/26',num:'75'},
{ dateTime:'2021/01/27',num:'78'},
{ dateTime:'2021/01/28',num:'80'},
{ dateTime:'2021/01/29',num:'83'},
{ dateTime:'2021/01/30',num:'85'},
{ dateTime:'2021/01/31',num:'90'},
]
}
}, },
mounted() { },
data() {
return {};
},
mounted() {},
methods: {
closeDialog() {
this.$emit("update:isShow", false);
}, },
methods: { },
closeDialog() { watch: {
this.$emit('update:isShow', false) isShow() {
} if (this.isShow) {
let _this = this;
setTimeout(() => {
_this.$refs.echarts.init();
});
}
} }
} },
};
</script> </script>
<style lang="scss"> <style lang="scss">
.mask { .mask {
position: fixed; position: fixed;
top: 0px; top: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
overflow: auto; overflow: auto;
z-index: 100; z-index: 100;
.dialog-wrapper { .dialog-wrapper {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 20%; top: 20%;
transform: translate(-50%, 0.1rem); transform: translate(-50%, 0.1rem);
font-size: 0.32rem; font-size: 0.32rem;
color: #62BAFF; color: #62baff;
width: 50vw; width: 50vw;
height: 50vh; height: 50vh;
padding: .24rem; padding: 0.24rem;
margin: 0; margin: 0;
background: rgba(0,19,45,0.9); background: rgba(0, 19, 45, 0.9);
box-shadow: -0.01rem 0 .1rem #62baff33, .01rem 0 .1rem #62baff33, 0 -.01rem .1rem #62baff33, 0 .01rem .1rem #62baff33; box-shadow: -0.01rem 0 0.1rem #62baff33, 0.01rem 0 0.1rem #62baff33,
.close { 0 -0.01rem 0.1rem #62baff33, 0 0.01rem 0.1rem #62baff33;
position: absolute; .close {
right: 0.12rem; position: absolute;
top: 0.12rem; right: 0.12rem;
width: 0.28rem; top: 0.12rem;
height: 0.28rem; width: 0.28rem;
z-index: 101; height: 0.28rem;
} z-index: 101;
.dialog-body { }
width: 100%; .dialog-body {
.triangle { width: 100%;
padding-bottom: .32rem; .triangle {
} padding-bottom: 0.32rem;
.list-of-body { }
height: calc(34vh - 1rem); .list-of-body {
padding-top: 0; height: calc(34vh - 1rem);
overflow:hidden; padding-top: 0;
.body-content { overflow: hidden;
height: 100%; .body-content {
} height: 100%;
}
}
.dialog-echarts-box{
height: 16vh;
width: 100%;
display: inline-block;
box-sizing: border-box;
} }
}
}
.dialog-echarts-box {
height: 16vh;
width: 100%;
display: inline-block;
box-sizing: border-box;
} }
}
} }
</style> </style>
\ No newline at end of file
src/components/areas.vue
View file @ b94f9aa7
<template> <template>
<div class="list-of-area"> <div class="list-of-area">
<triangle> <triangle>
<slot> <slot>
<div class="list-of-area-title common-title"> <div class="list-of-area-title common-title">
<img class="icon-title" src="/images/screen/boardsDemand.png" alt=""> <img
<span class="title">{{title}}</span> class="icon-title"
<img class="bg" src="/images/screen/title00_bg.png" alt=""> src="/images/screen/boardsDemand.png"
</div> alt=""
<div class="list-of-body"> />
<ul class="body-title"> <span class="title">{{ title }}</span>
<li class="f5">地区名称</li> <img class="bg" src="/images/screen/title00_bg.png" alt="" />
<li class="f3">播放量(次)</li> </div>
<li class="f2">展板数量</li> <div class="list-of-body">
</ul> <ul class="body-title">
<div class="body-content" id="areaContent"> <li class="f5">地区名称</li>
<div id="area1"> <li class="f3">播放量(次)</li>
<ul class="body-item" v-for="(item,index) in list" :key="index"> <li class="f2">展板数量</li>
<li class="f5">{{item.city}}</li> </ul>
<li class="f3">{{item.play}}</li> <div class="body-content" id="areaContent">
<li class="f2">{{item.num}}</li> <div id="area1">
</ul> <ul class="body-item" v-for="(item, index) in list" :key="index">
</div> <li class="f5">{{ item.areaName }}</li>
<div id="area2"></div> <li class="f3">{{ item.playNumber }}</li>
<div id="area3">></div> <li class="f2">{{ item.boardCnt }}</li>
</div> </ul>
</div>
</div> <div id="area2"></div>
</slot> <div id="area3"></div>
</triangle> <div id="area4"></div>
</div>
</div> </div>
</slot>
</triangle>
</div>
</template> </template>
<script> <script>
import triangle from '../components/slot/triangle' import triangle from "../components/slot/triangle";
export default { export default {
name: 'areas', name: "areas",
data() { data() {
return { return {
title:'地区展板播放统计', title: "地区展板播放统计",
timer:null, timer: null,
speed:50, speed: 50,
box:null, box: null,
area1:null, area1: null,
list:[ list: [],
{ city:'山西省',play:'10000', num:'24'}, };
{ city:'湖南省',play:'8878', num:'22'}, },
{ city:'海南省',play:'5934', num:'21'}, components: { triangle },
{ city:'贵州省',play:'5899', num:'18'}, mounted() {
{ city:'云南省',play:'5523', num:'16'}, this.getList();
{ city:'甘肃省',play:'4678', num:'12'}, },
{ city:'四川省',play:'4224', num:'6'}, methods: {
{ city:'湖南省',play:'3023', num:'4'}, initScroll() {
{ city:'江西省',play:'2412', num:'2'}, let _this = this;
{ city:'黑龙江省',play:'2258', num:'2'}, this.box = document.getElementById("areaContent");
{ city:'湖北省',play:'2198', num:'2'}, this.con1 = document.getElementById("area1");
{ city:'安徽省',play:'2158', num:'2'}, let con2 = document.getElementById("area2");
{ city:'新疆维吾尔自治区',play:'2258', num:'2'}, let con3 = document.getElementById("area3");
{ city:'广西壮族自治区',play:'1588', num:'2'}, let con4 = document.getElementById("area4");
{ city:'西藏自治区',play:'1258', num:'2'}, con2.innerHTML = this.con1.innerHTML;
] con3.innerHTML = this.con1.innerHTML;
con4.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++;
} }
}, },
components:{triangle}, getList() {
mounted() { let _this = this;
setTimeout(()=>{ let requestparams = {};
this.initScroll() requestparams._index = 1;
},1000) requestparams._size = 10;
this.$https(
{
method: "post",
url: "tBoardStatistic/getBoardDistrictPageList",
},
requestparams
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.list = res.data.data.records;
this.$nextTick(()=>{
_this.initScroll();
})
} else {
this.list = [];
}
} else {
this.list = [];
}
})
.catch((err) => {
this.$message.error(err.message);
});
}, },
methods: { },
initScroll() { };
let _this = this
this.box = document.getElementById("areaContent");
this.con1 = document.getElementById("area1");
let con2 = document.getElementById("area2");
let con3 = document.getElementById("area3");
con2.innerHTML = this.con1.innerHTML;
con3.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++;
}
},
}
}
</script> </script>
<style lang=scss> <style lang=scss>
</style> </style>
src/components/borderNums.vue
View file @ b94f9aa7
<template> <template>
<div class="dashbord-list"> <div class="dashbord-list">
<ul> <ul>
<li v-for="(item, index) in list"> <li v-for="(item, index) in list" :key="index">
<img :src="'/images/screen/'+ item.urlName+ '.png'" alt=""> <img :src="'/images/screen/' + item.urlName + '.png'" alt="" />
<div class="title"> <div class="title">
<div class="title-name">{{item.label}}</div> <div class="title-name">{{ item.label }}</div>
<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 {
list:[ data: [
{label:'总播放量',num: 1000, unit: '次',urlName:'play'}, {
{label:'单位组织',num: 688, unit: '家',urlName:'org'}, label: "总播放量",
{label:'展板总量',num: 20, unit: '个',urlName:'boardsTotal'}, num: 0,
{label:'互动总量',num: 899, unit: '次',urlName:'interaction'}, unit: "次",
] urlName: "play",
} feild: "playCnt",
}, },
mounted() { {
this.initData() 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: {
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);
});
}, },
methods: { },
initData(){ };
const _this = this
setInterval(()=>{
let num = Math.floor(Math.random()*4)
num = num > 2 ? 3:0
_this.$set(_this.list[num],'num', ++_this.list[num]['num'] )
},3000)
}
}
}
</script> </script>
<style lang=scss> <style lang=scss>
.dashbord-list{ .dashbord-list {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: -0.3rem; top: -0.3rem;
ul{ ul {
display: flex; display: flex;
font-size: 0; font-size: 0;
justify-content: space-around; justify-content: space-around;
li{ li {
position: relative; position: relative;
} }
img{ img {
width: 1.76rem; width: 1.76rem;
} }
.title{ .title {
position: absolute; position: absolute;
right: 0.2rem; right: 0.2rem;
bottom: 0; bottom: 0;
color: rgba(78,255,253,1); color: rgba(78, 255, 253, 1);
p{ p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.title-name{ .title-name {
font-size: 0.18rem; font-size: 0.18rem;
margin-bottom: 0.13rem; margin-bottom: 0.13rem;
} }
.num{ .num {
font-size: 0.28rem; font-size: 0.28rem;
} }
.unit{ .unit {
font-size: 0.16rem; font-size: 0.16rem;
margin-left: 0.05rem; margin-left: 0.05rem;
} }
}
} }
}
} }
</style> </style>
src/components/demand.vue
View file @ b94f9aa7
<template> <template>
<div class="demand "> <div class="demand">
<triangle> <triangle>
<slot> <slot>
<div class="common-title"> <div class="common-title">
<img class="icon-title" src="/images/screen/boardsDemand.png" alt=""> <img
<span class="title">{{title}}</span> class="icon-title"
<img class="bg" src="/images/screen/title02_bg.png" alt=""> src="/images/screen/boardsDemand.png"
</div> alt=""
<div id="barDemand" @click="echartsClick"></div> />
</slot> <span class="title">{{ title }}</span>
</triangle> <img class="bg" src="/images/screen/title02_bg.png" alt="" />
</div> </div>
<div id="barDemand" @click="echartsClick"></div>
</slot>
</triangle>
</div>
</template> </template>
<script> <script>
import triangle from '../components/slot/triangle' import triangle from "../components/slot/triangle";
export default { export default {
name: 'demand', name: "demand",
data() { data() {
return { return {
title:'互动频次' title: "互动频次",
} };
}, },
components:{triangle}, components: { triangle },
mounted() { props: {
setTimeout(()=>{ data: {
this.init() type: Object,
},100) default: () => {
return {};
},
}, },
methods: { },
init(){ mounted() {
let option = { },
tooltip: { methods: {
trigger: 'axis' init() {
let option = {
tooltip: {
trigger: "axis",
},
grid: {
top: 20,
left: "0%",
right: "2%",
bottom: "15%",
containLabel: true,
},
// dataZoom: [{
// type: "slider",
// show: true,
// bottom: '20',
// start: 0,
// end: 100,
// height: 18,
// handleStyle: {
// color: "#d3dee5",
// },
// textStyle: {
// color: "#fff",
// fontSize: "10px"
// },
// }
// ],
xAxis: {
type: "category",
boundaryGap: true, //坐标轴两边留白
data: this.data.xAxisData,
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0,
textStyle: {
color: "#FFFFFF",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 14,
},
formatter: function (value, index) {
if (value.length > 4) {
return value.slice(0, 4) + "...";
} else {
return value;
}
},
},
axisTick: {
//坐标轴刻度相关设置。
show: false,
}, },
grid: { axisLine: {
top:20, //坐标轴轴线相关设置
left: '0%', lineStyle: {
right: '2%', color: "rgba(98,186,255,0.6)",
bottom: '15%', type: "solid",
containLabel: true },
}, },
// dataZoom: [{ splitLine: {
// type: "slider", //坐标轴在 grid 区域中的分隔线。
// show: true, show: false,
// bottom: '20', },
// start: 0, },
// end: 100, yAxis: [
// height: 18, {
// handleStyle: { type: "value",
// color: "#d3dee5", name: "单位/次",
// }, splitNumber: 5,
// textStyle: { max: 100,
// color: "#fff", axisLabel: {
// fontSize: "10px"
// },
// }
// ],
xAxis: {
type: 'category',
boundaryGap: true,//坐标轴两边留白
data: [
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
],
axisLabel: { //坐标轴刻度标签的相关设置。
interval:0,
textStyle: { textStyle: {
color: '#FFFFFF', color: "#FFFFFFFF",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 12,
}, },
formatter: function (value, index) { interval: "auto",
if(value.length > 4){
return value.slice(0,4)+ '...'
}else {
return value
}
}
}, },
axisTick:{//坐标轴刻度相关设置。 axisLine: {
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisTick: {
lineStyle:{
color:'rgba(98,186,255,0.6)',
type:'solid'
}
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, splitLine: {
yAxis: [ show: true,
{ lineStyle: {
type: 'value', color: "rgba(98,186,255,0.6)",
name:'单位/次', type: "dashed",
splitNumber: 5,
max:100,
axisLabel: {
textStyle: {
color: '#FFFFFFFF',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
interval:'auto'
},
axisLine:{
show: false
},
axisTick:{
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98,186,255,0.6)',
type:'dashed'
}
}
}
],
series: [
{
type: 'bar',
barWidth: 16, // 柱子宽度
itemStyle:{
barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
}, },
},
},
],
series: [
{
type: "bar",
barWidth: 16, // 柱子宽度
itemStyle: {
barBorderRadius: 120, // 圆角（左上、右上、右下、左下）
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(
'rgba(78,255,253,1)', 'rgba(255,74,83,1)' 0,
].map((color, offset) => ({ 0,
color, 0,
offset 1,
}))), // 渐变 ["rgba(78,255,253,1)", "rgba(255,74,83,1)"].map(
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() (color, offset) => ({
} color,
] offset,
}; })
let echartsDiv = this.$echarts.init(document.getElementById('barDemand')) )
echartsDiv.setOption(option) ), // 渐变
}, data: this.data.yAxisData,
// 点击事件 },
echartsClick(){ ],
this.$emit('itemClick',{type:1,title:this.title}) };
} let echartsDiv = this.$echarts.init(document.getElementById("barDemand"));
} echartsDiv.setOption(option);
} },
// 点击事件
echartsClick() {
this.$emit("itemClick", { type: 1, title: this.title });
},
},
};
</script> </script>
<style lang=scss> <style lang=scss>
#barDemand{ #barDemand {
width: 100%; width: 100%;
height: calc(100% - 0.6rem); height: calc(100% - 0.6rem);
margin-top: 0.6rem; margin-top: 0.6rem;
} }
</style> </style>
src/components/echarts/bar.vue
View file @ b94f9aa7
...@@ -10,10 +10,13 @@ ...@@ -10,10 +10,13 @@
title:'互动频次' title:'互动频次'
} }
}, },
props:{
data:{
type:Object,
default:()=>{return {}}
}
},
mounted() { mounted() {
setTimeout(()=>{
this.init()
},100)
}, },
methods: { methods: {
init(){ init(){
...@@ -31,9 +34,7 @@ ...@@ -31,9 +34,7 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: true,//坐标轴两边留白 boundaryGap: true,//坐标轴两边留白
data: [ data: this.data.xAxisData,
'北京市政府', '天津市政府', '呼和浩特市政府', '石家庄市政府', '合肥市政府', '哈尔滨市政府', '廊坊市政府', '临沂市政府','忻州市政府', '黑龙江市政府',
],
axisLabel: { //坐标轴刻度标签的相关设置。 axisLabel: { //坐标轴刻度标签的相关设置。
interval:0, interval:0,
textStyle: { textStyle: {
...@@ -108,7 +109,7 @@ ...@@ -108,7 +109,7 @@
color, color,
offset offset
}))), // 渐变 }))), // 渐变
data: [ 25, 30,40, 52, 56,63, 73, 75, 83, 85,90].reverse() data: this.data.yAxisData
} }
] ]
}; };
......
src/components/echarts/line.vue
View file @ b94f9aa7
<template> <template>
<div id="dialogTends"></div> <div id="dialogTends"></div>
</template> </template>
<script> <script>
export default { export default {
name: 'interaction', name: "interaction",
data() { data() {
return { return {
title:'展板点播趋势图' title: "展板点播趋势图",
} };
},
props: {
data: {
type: Object,
default: () => {
return {};
},
},
}, },
mounted() { mounted() {
setTimeout(()=>{
this.init()
},100)
}, },
methods: { methods: {
init(){ init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top:20, top: 20,
left: '2%', left: "2%",
right: 20, right: 20,
bottom: '15%', bottom: "15%",
containLabel: true containLabel: true,
}, },
dataZoom: [{ dataZoom: [
type: "slider", {
show: true, type: "slider",
bottom: '0', show: true,
start: 0, bottom: "0",
end: 100, start: 0,
height: 18, end: 100,
handleStyle: { height: 18,
color: "#d3dee5", handleStyle: {
}, color: "#d3dee5",
textStyle: { },
color: "#fff", textStyle: {
fontSize: "10px" color: "#fff",
fontSize: "10px",
},
}, },
}], ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false,//坐标轴两边留白 boundaryGap: false, //坐标轴两边留白
data: [ data: this.data.xAxisData,
'2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10', axisLabel: {
'2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20', //坐标轴刻度标签的相关设置。
'2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
axisLabel: { //坐标轴刻度标签的相关设置。
textStyle: { textStyle: {
color: '#FFFFFF', color: "#FFFFFF",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
}, },
axisTick:{//坐标轴刻度相关设置。 axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisLine: {
lineStyle:{ //坐标轴轴线相关设置
color:'rgba(98,186,255,0.6)', lineStyle: {
type:'solid' color: "rgba(98,186,255,0.6)",
} type: "solid",
},
}, },
splitLine: { //坐标轴在 grid 区域中的分隔线。 splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
splitNumber: 5, splitNumber: 5,
max:100, max: 100,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#FFFFFFFF', color: "#FFFFFFFF",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 12, fontSize: 12,
}, },
interval:'auto' interval: "auto",
}, },
axisLine:{ axisLine: {
show: false show: false,
}, },
axisTick:{ axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(98,186,255,0.6)', color: "rgba(98,186,255,0.6)",
type:'dashed' type: "dashed",
} },
} },
},
}
], ],
series: [ series: [
{ {
type: 'line', type: "line",
smooth:true, smooth: true,
itemStyle: { itemStyle: {
normal: { normal: {
color:'rgba(255,74,83,1)', color: "rgba(255,74,83,1)",
lineStyle: { lineStyle: {
color: "rgba(78,255,253,1)", color: "rgba(78,255,253,1)",
width:1 width: 1,
}, },
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
offset: 0, {
color: 'rgba(255,74,83,0.4)' offset: 0,
}, { color: "rgba(255,74,83,0.4)",
offset: 1, },
color: 'rgba(78,255,253,0.4)' {
}]), offset: 1,
} color: "rgba(78,255,253,0.4)",
} },
]),
},
},
}, },
data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38, data: this.data.yAxisData
40, 42, 45, 44, 46, 47, 49, 52, 56, 59, },
63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90 ],
]
}
]
}; };
let echartsDiv = this.$echarts.init(document.getElementById('dialogTends')) let echartsDiv = this.$echarts.init(
echartsDiv.setOption(option) document.getElementById("dialogTends")
);
echartsDiv.setOption(option);
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
#dialogTends{ #dialogTends {
width: 100%; width: 100%;
height: 16vh; height: 16vh;
margin-top: 0.6rem; margin-top: 0.6rem;
......
src/components/interaction.vue
View file @ b94f9aa7
...@@ -3,9 +3,13 @@ ...@@ -3,9 +3,13 @@
<triangle> <triangle>
<slot> <slot>
<div class="common-title"> <div class="common-title">
<img class="icon-title" src="/images/screen/boardsDemand.png" alt=""> <img
<span class="title">{{title}}</span> class="icon-title"
<img class="bg" src="/images/screen/title02_bg.png" alt=""> src="/images/screen/boardsDemand.png"
alt=""
/>
<span class="title">{{ title }}</span>
<img class="bg" src="/images/screen/title02_bg.png" alt="" />
</div> </div>
<div id="tends" @click="echartsClick"></div> <div id="tends" @click="echartsClick"></div>
</slot> </slot>
...@@ -14,33 +18,42 @@ ...@@ -14,33 +18,42 @@
</template> </template>
<script> <script>
import triangle from '../components/slot/triangle' import triangle from "../components/slot/triangle";
export default { export default {
name: 'interaction', name: "interaction",
data() { data() {
return { return {
title:'展板点播趋势图' title: "展板点播趋势图",
} };
},
components: { triangle },
props: {
data: {
type: Object,
default: () => {
return {};
},
},
}, },
components:{triangle},
mounted() { mounted() {
setTimeout(()=>{ // setTimeout(() => {
this.init()
},100) // this.init();
// }, 100);
}, },
methods: { methods: {
init(){ init() {
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
grid: { grid: {
top:20, top: 20,
left: '2%', left: "2%",
right: 20, right: 20,
bottom: '15%', bottom: "15%",
containLabel: true containLabel: true,
}, },
// dataZoom: [{ // dataZoom: [{
// type: "slider", // type: "slider",
...@@ -59,105 +72,105 @@ export default { ...@@ -59,105 +72,105 @@ export default {
// } // }
// ], // ],
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false,//坐标轴两边留白 boundaryGap: false, //坐标轴两边留白
data: [ data: this.data.xAxisData,
'2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08','2021/01/09', '2021/01/10', axisLabel: {
'2021/01/11', '2021/01/12', '2021/01/13', '2021/01/14', '2021/01/15', '2021/01/16', '2021/01/17', '2021/01/18','2021/01/19', '2021/01/20', //坐标轴刻度标签的相关设置。
'2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
axisLabel: { //坐标轴刻度标签的相关设置。
textStyle: { textStyle: {
color: '#FFFFFF', color: "#FFFFFF",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 14, fontSize: 14,
}, },
}, },
axisTick:{//坐标轴刻度相关设置。 axisTick: {
//坐标轴刻度相关设置。
show: false, show: false,
}, },
axisLine:{//坐标轴轴线相关设置 axisLine: {
lineStyle:{ //坐标轴轴线相关设置
color:'rgba(98,186,255,0.6)', lineStyle: {
type:'solid' color: "rgba(98,186,255,0.6)",
} type: "solid",
},
}, },
splitLine: { //坐标轴在 grid 区域中的分隔线。 splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: false, show: false,
} },
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
splitNumber: 5, splitNumber: 5,
max:100, max: 100,
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#FFFFFFFF', color: "#FFFFFFFF",
fontStyle: 'normal', fontStyle: "normal",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
fontSize: 12, fontSize: 12,
}, },
interval:'auto' interval: "auto",
}, },
axisLine:{ axisLine: {
show: false show: false,
}, },
axisTick:{ axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(98,186,255,0.6)', color: "rgba(98,186,255,0.6)",
type:'dashed' type: "dashed",
} },
} },
},
}
], ],
series: [ series: [
{ {
type: 'line', type: "line",
smooth:true, smooth: true,
itemStyle: { itemStyle: {
normal: { normal: {
color:'rgba(255,74,83,1)', color: "rgba(255,74,83,1)",
lineStyle: { lineStyle: {
color: "rgba(78,255,253,1)", color: "rgba(78,255,253,1)",
width:1 width: 1,
}, },
areaStyle: { areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{ color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
offset: 0, {
color: 'rgba(255,74,83,0.4)' offset: 0,
}, { color: "rgba(255,74,83,0.4)",
offset: 1, },
color: 'rgba(78,255,253,0.4)' {
}]), offset: 1,
} color: "rgba(78,255,253,0.4)",
} },
]),
},
},
}, },
data: [ 18, 19, 22, 23, 25, 26, 28, 30, 36, 38, data: this.data.yAxisData
40, 42, 45, 44, 46, 47, 49, 52, 56, 59, },
63, 66, 68, 69, 73, 75, 78, 80, 83, 85,90 ],
]
}
]
}; };
let echartsDiv = this.$echarts.init(document.getElementById('tends')) let echartsDiv = this.$echarts.init(document.getElementById("tends"));
echartsDiv.setOption(option) echartsDiv.setOption(option);
}, },
// 点击事件 // 点击事件
echartsClick(){ echartsClick() {
this.$emit('itemClick',{type:2,title:this.title}) this.$emit("itemClick", { type: 2, title: this.title });
} },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
#tends{ #tends {
width: 100%; width: 100%;
height: calc(100% - 0.6rem); height: calc(100% - 0.6rem);
margin-top: 0.6rem; margin-top: 0.6rem;
......
src/components/maps.vue
View file @ b94f9aa7
<template> <template>
<div id="mapDiv"> <div id="mapDiv"></div>
</div>
</template> </template>
<script> <script>
import 'echarts/map/js/china' import "echarts/map/js/china";
var dataList = [{ export default {
name: '安徽',value: 5498 name: "maps",
}, { data() {
name: '澳门',value: 0 return {
}, { dataList: [],
name: '北京',value: 0 };
}, { },
name: '福建',value: 4111 mounted() {
}, { this.getList();
name: '甘肃',value: 59 },
}, { methods: {
name: '广东',value: 1928 getList() {
}, { this.$https({
name: '广西',value: 4 method: "post",
}, { url: "tBoardStatistic/getBoardProvincePlayTotalList",
name: '贵州',value: 52 authType: this.backToken,
}, { })
name: '海南',value: 1284 .then((res) => {
}, { if (res.status == 200) {
name: '河北',value: 3151 if (res.data.resultCode == 200) {
}, { this.dataList = res.data.data;
name: '河南',value: 3814 } else {
}, { this.dataList = [];
name: '黑龙江',value: 316
}, {
name: '湖北',value: 1724
}, {
name: '湖南',value: 33378
}, {
name: '吉林',value: 520
}, {
name: '江苏',value: 113
}, {
name: '江西',value: 961
}, {
name: '辽宁',value: 139
}, {
name: '内蒙古',value: 0
}, {
name: '宁夏',value: 60
}, {
name: '青海',value: 0
}, {
name: '山东',value: 106
}, {
name: '山西',value: 0
}, {
name: '陕西',value: 114
}, {
name: '上海',value: 1321
}, {
name: '四川',value: 7867
}, {
name: '台湾',value: 0
}, {
name: '天津',value: 1157
}, {
name: '西藏',value: 14
}, {
name: '香港',value: 0
}, {
name: '新疆',value: 115
}, {
name: '云南',value: 3811
}, {
name: '浙江',value: 0
}, {
name: '重庆',value: 886
}
];
export default {
name: 'maps',
data() {
return {
}
},
mounted() {
setTimeout(()=>{
this.init()
},100)
},
methods: {
init(){
let option = {
tooltip: {
triggerOn: "click",
formatter: function(e, t, n) {
return .5 == e.value ? e.name + "：播放量" : e.seriesName + "<br />" + e.name + "：" + e.value
} }
} else {
this.dataList = [];
}
this.init();
})
.catch((err) => {
this.$message.error(err.message);
this.init();
});
},
init() {
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: [{ },
visualMap: [
{
dimension: 0, dimension: 0,
left: '8%', left: "8%",
bottom:20, bottom: 20,
itemWidth: 16, itemWidth: 16,
orient:'horizontal', orient: "horizontal",
text: ['播放量', '由低到高'], text: ["播放量", "由低到高"],
backgroundColor:'rgba(0,19,45,0.4)', backgroundColor: "rgba(0,19,45,0.4)",
padding:16, padding: 16,
textStyle: { textStyle: {
color: 'gba(255,255,255,1)' color: "gba(255,255,255,1)",
}, },
inRange: { inRange: {
color: ['rgba(161,255,255,1)', 'rgba(91,214,255,1)', 'rgba(38,157,255,1)', 'rgba(0,72,149,1)'] color: [
} "rgba(161,255,255,1)",
}], "rgba(91,214,255,1)",
geo: { "rgba(38,157,255,1)",
map: "china", "rgba(0,72,149,1)",
roam: !1, ],
scaleLimit: {
min: 1,
max: 2
}, },
},
],
geo: {
map: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
roam: true, //是否开启平游或缩放 roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制 scaleLimit: {
min: 1, //滚轮缩放的极限控制
max: 2 min: 1,
}, max: 2,
},
zoom: 1.2, zoom: 1.2,
top: 51, top: 51,
label: { label: {
normal: { normal: {
show: !0, show: !0,
fontSize: "12", fontSize: "12",
color: "#fff" color: "#fff",
}
}, },
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: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
}
},
label: {
show: false // 隐藏文字
}
}
]
}, },
series: [{ regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
name: "播放量", name: "播放量",
type: "map", type: "map",
geoIndex: 0, geoIndex: 0,
data: dataList data:this.dataList,
}] },
}; ],
let echartsDiv = this.$echarts.init(document.getElementById('mapDiv')) };
echartsDiv.setOption(option) let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
} echartsDiv.setOption(option);
} },
} },
};
</script> </script>
<style lang=scss> <style lang=scss>
#mapDiv{ #mapDiv {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
src/components/top10.vue
View file @ b94f9aa7
<template> <template>
<div class="list-of-top10"> <div class="list-of-top10">
<triangle> <triangle>
<slot> <slot>
<div class="list-of-top10-title common-title"> <div class="list-of-top10-title common-title">
<img class="icon-title" src="/images/screen/boardsDemand.png" alt=""> <img
<span class="title">{{title}}</span> class="icon-title"
<img class="bg" src="/images/screen/title01_bg.png" alt=""> src="/images/screen/boardsDemand.png"
</div> alt=""
<div class="list-of-body"> />
<ul class="body-title"> <span class="title">{{ title }}</span>
<li class="f1">排名</li> <img class="bg" src="/images/screen/title01_bg.png" alt="" />
<li class="f7">展板名称</li> </div>
<li class="f2">播放量</li> <div class="list-of-body">
</ul> <ul class="body-title">
<div class="body-content" id="bodyContent"> <li class="f1">排名</li>
<div id="con1"> <li class="f7">展板名称</li>
<ul class="body-item" v-for="(item,index) in list"> <li class="f2">播放量</li>
<li class="f1">{{index%10 + 1}}</li> </ul>
<li class="f7"> <div class="body-content" id="bodyContent">
<div class="title" :title="item.name">{{item.name}}</div> <div id="con1">
</li> <ul class="body-item" v-for="(item, index) in list" :key="index">
<li class="f2">{{item.num}}</li> <li class="f1">{{ (index % 10) + 1 }}</li>
</ul> <li class="f7">
</div> <div class="title" :title="item.boardName">{{ item.boardName }}</div>
<div id="con2"></div> </li>
</div> <li class="f2">{{ item.playNumber }}</li>
</div> </ul>
</slot> </div>
</triangle> <div id="con2"></div>
</div> </div>
</div>
</slot>
</triangle>
</div>
</template> </template>
<script> <script>
import triangle from '../components/slot/triangle' import triangle from "../components/slot/triangle";
export default { import { getCurDate } from './util.time.js'
name: 'top10', export default {
data() { name: "top10",
return { data() {
title:'全国2021年3月展板点播TOP10', return {
timer:null, title: "全国2021年3月展板点播TOP10",
speed:50, timer: null,
box:null, speed: 50,
con1:null, box: null,
list:[ con1: null,
{ name:'中国沦为半殖民地半封建社会', num:'11902' }, list: [],
{ name:'抗日战争取得伟大胜利', num:'59876' }, };
{ name:'筹建新中国', num:'68902' }, },
{ name:'中华人民共和国成立', num:'368902' }, components: { triangle },
{ name:'伟大成就', num:'78902' }, mounted() {
{ name:'完善和落实中国特色社会主义事业总体布局', num:'58902' }, this.title = this.getTitle();
{ name:'中国特色社会主义进入新时代', num:'88902'}, this.getList()
{ name:'开创中国特色社会主义新局面', num:'78902'}, },
{ name:'社会主义文化强国建设迈出坚实步伐', num:'108902'}, methods: {
{ name:'坚决打赢脱贫攻坚战', num:'188902'}, getTitle() {
let curTime = getCurDate();
// { name:'蒋介石背叛革命 建立独裁统治', num:'20300' }, return `全国${curTime.year}年${curTime.month}月展板点播TOP10`;
// { name:'开辟农村包围城市武装夺取政权道路', num:'50780' },
// { name:'坚持党的基本路线不动摇', num:'68902' },
// { name:'港澳回归', num:'68902' },
// { name:'让人民群众共享改革发展成果', num:'48902'},
// { name:'“一带一路”倡议推进对外开放向纵深拓展', num:'8902'},
// { name:'生态保护与修复力度持续加大', num:'7902'},
// { name:'大力践行外交为民', num:'9902'},
]
}
}, },
components:{triangle}, initScroll() {
mounted() { let _this = this;
this.list.sort((a,b)=>{ this.box = document.getElementById("bodyContent");
return b.num - a.num this.con1 = document.getElementById("con1");
}) let con2 = document.getElementById("con2");
this.list = [...this.list,...this.list] con2.innerHTML = this.con1.innerHTML;
setTimeout(()=>{ this.timer = setInterval(_this.scrollUp, _this.speed);
this.initScroll()
},1000)
}, },
methods: { scrollUp() {
initScroll() { if (this.box.scrollTop >= this.con1.scrollHeight) {
let _this = this this.box.scrollTop = 0;
this.box = document.getElementById("bodyContent"); } else {
this.con1 = document.getElementById("con1"); this.box.scrollTop++;
let con2 = document.getElementById("con2");
con2.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);
} }
},
Ups() {
let _this = this;
this.timer = setInterval(_this.scrollUp, _this.speed);
},
Stops() {
clearInterval(this.timer);
},
getList() {
let _this = this
let requestparams = {};
requestparams._index = 1;
requestparams._size = 10;
this.$https(
{
method: "post",
url: "tBoardStatistic/getBoardRankPageList",
authType: this.backToken,
},
requestparams
)
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.list = res.data.data.records;
this.$nextTick(()=>{
_this.initScroll();
})
} else {
this.list = [];
}
} else {
this.list = [];
}
})
.catch((err) => {
this.$message.error(err.message);
});
} }
} },
};
</script> </script>
<style lang=scss> <style lang=scss>
</style> </style>
src/components/util.time.js 0 → 100644
View file @ b94f9aa7
export function getCurDate() {
let date = new Date()
let year = date.getFullYear();
let month = date.getMonth() + 1;
let dates = date.getDate()
return {
year: year,
month: month > 9 ? month : `0${month}`,
date: dates > 9 ? dates : `0${dates}`
};
}
\ No newline at end of file
src/router/index.js
View file @ b94f9aa7
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes= [ const routes = [
{ {
path: '/', path: '/',
redirect: '/commit', redirect: '/commit',
...@@ -41,38 +41,38 @@ const routes= [ ...@@ -41,38 +41,38 @@ const routes= [
{ {
path: '/commit', path: '/commit',
name: 'commit', name: 'commit',
component:() => import('@/views/user/commit.vue') component: () => import('@/views/user/commit.vue')
}, },
{ {
path: '/learn', path: '/learn',
name: 'learn', name: 'learn',
component: () => import('@/views/user/learn.vue') component: () => import('@/views/user/learn.vue')
}, },
{ {
path: '/admin', path: '/admin',
name: 'admin', name: 'admin',
component: () => import('@/views/user/admin.vue') component: () => import('@/views/user/admin.vue')
}, },
{ {
path: '/editPsd', path: '/editPsd',
name: 'editPsd', name: 'editPsd',
component: () => import('@/views/user/editPsd.vue') component: () => import('@/views/user/editPsd.vue')
}, },
{ {
path: '/learnContent', path: '/learnContent',
name: 'learnContent', name: 'learnContent',
component: () => import('@/views/user/components/learnContent.vue') component: () => import('@/views/user/components/learnContent.vue')
}, },
{ {
path: '/learnDetail', path: '/learnDetail',
name: 'learnDetail', name: 'learnDetail',
component: () => import('@/views/user/components/learnDetail.vue') component: () => import('@/views/user/components/learnDetail.vue')
}, },
{ {
path: '/adminInfo', path: '/adminInfo',
name: 'adminInfo', name: 'adminInfo',
component: () => import('@/views/user/components/adminInfo.vue') component: () => import('@/views/user/components/adminInfo.vue')
}, },
] ]
const router = new VueRouter({ const router = new VueRouter({
...@@ -81,12 +81,17 @@ const router = new VueRouter({ ...@@ -81,12 +81,17 @@ const router = new VueRouter({
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let user = localStorage.getItem("token"); let user = localStorage.getItem("token");
if (!user && to.path !=='/login' && to.path !=='/success') { // 通过vuex state获取当前的token是否存在 if (to.path !== '/screen') {
next({ if (!user && to.path !== '/login' && to.path !== '/success') { // 通过vuex state获取当前的token是否存在
path: '/login', next({
}) path: '/login',
}else { })
} else {
next();
}
} else {
next(); next();
} }
}) })
export default router export default router
src/views/screen.vue
View file @ b94f9aa7
<template> <template>
<div class="screen-container"> <div class="screen-container">
<div class="page-title"> <div class="page-title">
<p> - 播放数据统计 - </p> <p>- 播放数据统计 -</p>
</div>
<div class="user-info">
<img src="/images/screen/user.png" alt="" class="icon-user">
<span class="user-name">中国国家博物馆</span>
<img src="/images/screen/close.png" alt="" class="signup">
<img src="/images/screen/manager.png" @click="goManager" alt="" class="manager">
</div>
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums></borderNums>
<mapDiv></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list"></top10>
</div>
<div class="echartspanel">
<demand class="echarts-box left" @itemClick="itemClick"></demand>
<interaction class="echarts-box right" @itemClick="itemClick"></interaction>
</div>
<!-- 弹框 -->
<m-dialog :is-show.sync="showDialog" :dialog-data="dialogData"/>
</div> </div>
<div class="user-info">
<img src="/images/screen/user.png" alt="" class="icon-user" />
<span class="user-name">中国国家博物馆</span>
<img src="/images/screen/close.png" alt="" class="signup" />
<img
src="/images/screen/manager.png"
@click="goManager"
alt=""
class="manager"
/>
</div>
<div class="middel-part">
<!--地区展板播放统计-->
<areas class="table-list"></areas>
<!--中间地图-->
<div class="map-container">
<borderNums></borderNums>
<mapDiv></mapDiv>
</div>
<!--全国点播板块-->
<top10 class="table-list"></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> </template>
<script> <script>
import { 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: {},
};
},
components: {
demand, demand,
interaction, interaction,
areas, areas,
top10, top10,
mapDiv, mapDiv,
borderNums, borderNums,
MDialog MDialog,
} from '../components' },
export default { mounted() {
data(){ let clientWidth = document.body.clientWidth;
return{ clientWidth = clientWidth > 1920 ? 1920 : clientWidth;
showDialog:false, let fontSize = (clientWidth / 1920) * 100;
dialogData:{} // 1 是互动频次弹框 2 是趋势图弹框 document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
this.getList();
},
methods: {
// 接收柱状图传来的数据
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;
}, },
components:{demand, interaction , areas, top10, mapDiv, borderNums,MDialog}, goManager() {
mounted(){ location.href = "http://121.4.56.121:84";
let clientWidth = document.body.clientWidth;
clientWidth = clientWidth>1920? 1920: clientWidth
let fontSize = clientWidth/1920 * 100
document.getElementsByTagName("html")[0].style.fontSize = fontSize + 'px'
}, },
methods:{ getList() {
// 接收柱状图传来的数据 let curTime = getCurDate();
itemClick(params){ let frequencyDate = curTime.year + curTime.month;
this.showDialog = true this.getPageList("interact", frequencyDate);
this.dialogData = params this.getPageList("trend", frequencyDate);
}, },
goManager(){ getPageList(type, frequencyDate) {
location.href="http://121.4.56.121:84" let httpUrl = "";
} let _this = this;
} if (type === "interact") {
} httpUrl =
"tBoardStatistic/getInteractionFrequencyPageList?frequencyDate=";
}
if (type === "trend") {
httpUrl = "tBoardStatistic/getBoardTrendPageList?playDate=";
}
_this
.$https({
method: "post",
url: `${httpUrl}${frequencyDate}`,
})
.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> </script>
<style lang="scss"> <style lang="scss">
.screen-container{ .screen-container {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 10px; height: 10px;
//background-color: rgba(255, 255, 255, 0.2) !important; //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("/images/screen/bg@1x.png") no-repeat;
background-size: 100% 100%;
padding: 0 0.32rem;
box-sizing: border-box;
.page-title {
width: 100%; width: 100%;
height: 100%; height: 0.67rem;
overflow: hidden; background: url("/images/screen/top_bg.png") no-repeat;
background-color: #08214c;
/*background: url("/images/screen/bg.png") no-repeat;*/
background: url("/images/screen/bg@1x.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 0 0.32rem; 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; box-sizing: border-box;
.page-title{ .echarts-box {
width: 100%; height: 100%;
height: 0.67rem; width: 50%;
background: url("/images/screen/top_bg.png") no-repeat; display: inline-block;
background-size: 100% 100%; box-sizing: border-box;
p{ &.left {
font-size: 0.32rem; padding-right: 0.12rem;
color: #62BAFF; float: left;
position: absolute; }
left: 50%; &.right {
transform: translate(-50%, 0.1rem); padding-left: 0.12rem;
margin: 0; float: right;
} }
} }
.user-info{ }
position: absolute; .middel-part {
right: 0.56rem; display: flex;
top: 0.31rem; margin-top: 4.16vh;
display: flex; height: 56.48vh;
align-items: center; justify-content: space-between;
.icon-user,.signup{ .table-list {
width: 0.28rem; width: 25vw;
height: 0.28rem; height: 100%;
}
.user-name{
font-size: 0.18rem;
color: #4FFFFD;
margin-left: 0.12rem;
}
.signup{
margin-left: 0.4rem;
}
.manager {
cursor: pointer;
width: .32rem;
height: .32rem;
margin-left: .2rem;
}
} }
.echartspanel{ }
height: 34vh; .table-list {
width: 100%; .list-of-body {
bottom: 0rem; padding-top: 0.7rem;
padding: 0.24rem 0; 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; box-sizing: border-box;
.echarts-box{ li {
height: 100%; line-height: 0.4rem;
&.f1 {
width: 10%;
}
&.f2 {
width: 20%;
}
&.f3 {
width: 30%;
}
&.f5 {
width: 50%; width: 50%;
display: inline-block; }
box-sizing: border-box; &.f6 {
&.left{ width: 60%;
padding-right: 0.12rem; }
float: left; &.f7 {
} width: 70%;
&.right{ }
padding-left: 0.12rem; div.title {
float: right; white-space: nowrap;
} overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
.middel-part{ .body-title {
display: flex; color: #62baff;
margin-top: 4.16vh; margin-bottom: 0.07rem;
height: 56.48vh; }
justify-content: space-between; .body-content {
.table-list{ height: calc(100% - 0.8rem);
width: 25vw; overflow-y: auto;
height: 100%; .body-item {
height: 0.4rem;
background-color: #62baff33;
margin-bottom: 0.04rem;
color: #4efffd;
} }
}
} }
.table-list{ }
.list-of-body{ .common-title {
padding-top: 0.7rem; .icon-title {
height: 100%; position: absolute;
box-sizing: border-box; top: 0.1rem;
ul{ left: 0.1rem;
display: flex; width: 0.4rem;
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: auto;
.body-item{
height: 0.4rem;
background-color: #62baff33;
margin-bottom: 0.04rem;
color: #4EFFFD ;
}
}
}
} }
.common-title{ .title {
.icon-title{ position: absolute;
position: absolute; top: 0.2rem;
top: 0.10rem; left: 0.52rem;
left: 0.1rem; font-size: 0.2rem;
width: 0.4rem; line-height: 0.2rem;
} color: #4efffd;
.title{
position: absolute;
top: 0.20rem;
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{ .bg {
flex: 1; position: absolute;
height: 100%; width: calc(100% - 0.48rem);
position: relative; left: 0.24rem;
padding-top: 0.7rem; top: 0.24rem;
box-sizing: border-box;
} }
}
.map-container {
flex: 1;
height: 100%;
position: relative;
padding-top: 0.7rem;
box-sizing: border-box;
}
} }
</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