Commit 7b19e994 authored by Your Name's avatar Your Name

地图不见、机构管理

parent 6904ac15
......@@ -12,9 +12,9 @@
></el-input>
</el-form-item>
<el-form-item>
<el-select
<el-select
v-model="form.orgId"
filterable
filterable
placeholder="请选择所属单位"
clearable>
<el-option
......
This diff is collapsed.
<template>
<div id="mapDiv"></div>
</template>
<script>
// import "echarts/map/js/china";
import echarts from 'echarts'
import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson);
export default {
name: "maps",
data() {
return {
dataList: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardProvincePlayTotalList",
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.dataList = res.data.data;
} else {
this.dataList = [];
}
} 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: [
{
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: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 2,
},
zoom: 1,
top: 100,
left: "10%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
},
},
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: this.dataList,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
},
},
};
</script>
<style lang="less">
#mapDiv {
width: 100%;
height: 100%;
}
</style>
<template>
<div id="mapDiv"></div>
</template>
<script>
// import "echarts/map/js/china";
import echarts from 'echarts'
import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson);
export default {
name: "maps",
data() {
return {
dataList: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
this.$https({
method: "post",
url: "tBoardStatistic/getBoardProvincePlayTotalList",
authType: this.backToken,
})
.then((res) => {
if (res.status == 200) {
if (res.data.resultCode == 200) {
this.dataList = res.data.data;
} else {
this.dataList = [];
}
} 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: [
{
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: "china",
roam: !1,
scaleLimit: {
min: 1,
max: 2,
},
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1,
max: 2,
},
zoom: 1,
top: 100,
left: "10%",
label: {
normal: {
show: !0,
fontSize: "12",
color: "#fff",
},
},
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: this.dataList,
},
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
},
},
};
</script>
<style lang="less">
#mapDiv {
width: 100%;
height: 100%;
}
</style>
<template>
<div class="map-box">
<div id="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span
>
......@@ -118,14 +118,15 @@ export default {
map: this.parentInfo.length === 1 ? "china" : "map",
roam: !1,
roam: true, //是否开启平游或缩放
scaleLimit: {
//滚轮缩放的极限控制
min: 1
},
// scaleLimit: {
// //滚轮缩放的极限控制
// min: 1
// },
zoom: 1.1,
top: 100,
left: "20%",
top: 110,
bottom:0,
left: "24%",
label: {
normal: {
show: !0,
......@@ -159,6 +160,10 @@ export default {
},
},
},
emphasis: {
// color: "#ffffff",
show: true,
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
......@@ -195,7 +200,7 @@ export default {
],
};
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option);
echartsDiv.setOption(option, true);
echartsDiv.on("click", this.echartsMapClick);
},
handleBack() {
......@@ -262,7 +267,7 @@ export default {
</script>
<style lang="less">
.map-box {
#map-box {
width: 100%;
height: 100%;
#back {
......
<template>
<div class="overview-wrapper height100">
<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">
<div class="echarts-box left">
<demand class="echarts-panel"></demand>
</div>
<div class="echarts-box right">
<interact class="echarts-panel"></interact>
</div>
</div>
</div>
</template>
<script>
import {
demand,
interact,
areas,
top10,
mapDiv,
borderNums
} from './components'
export default {
data(){
return {
}
},
components:{demand, interact , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
.middel-part{
display: flex;
height: 50vh;
justify-content: space-between;
overflow:hidden;
.table-list{
width: 25vw;
height: 100%;
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
padding: 20px;
}
.map-container{
position: relative;
width: calc(100% - 50vw);
height: 100%;
}
}
/deep/ .common-title{
.icon-title{
width: 20px;
vertical-align: middle;
}
.title{
font-weight: 500;
font-size: 20px;
color: @font-color;
line-height: 20px;
vertical-align: middle;
margin-left: 12px;
}
.bg{
width: 100%;
}
}
//列表
.table-list{
/deep/.list-of-body{
height: calc(100% - 50px);
box-sizing: border-box;
ul{
display: flex;
align-items: flex-start;
font-size: 16px;
padding-left: 20px;
box-sizing: border-box;
li{
line-height: 40px;
&.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;
padding-right: 10px;
}
}
}
.body-title{
color: @font-color;
}
.body-content{
height: calc(100% - 40px);
overflow-y: hidden;
.body-item{
height: 40px;
background-color: @party-bg-gray;
margin-bottom: 3px;
color: @font-color;
}
}
}
}
// echarts 样式
.echartspanel{
height: calc(100% - 50vh);
padding-top: 20px;
.echarts-box{
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left{
padding-right: 10px;
float: left;
}
&.right{
padding-left: 10px;
float: right;
}
.echarts-panel{
background:@party-white;
border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
padding: 20px;
}
}
}
}
<template>
<div class="overview-wrapper height100">
<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">
<div class="echarts-box left">
<demand class="echarts-panel"></demand>
</div>
<div class="echarts-box right">
<interact class="echarts-panel"></interact>
</div>
</div>
</div>
</template>
<script>
import {
demand,
interact,
areas,
top10,
mapDiv,
borderNums
} from './components'
export default {
data(){
return {
}
},
components:{demand, interact , areas, top10, mapDiv, borderNums},
}
</script>
<style lang="less" scoped>
.overview-wrapper{
.middel-part{
display: flex;
height: 50vh;
justify-content: space-between;
overflow:hidden;
.table-list{
width: 25vw;
height: 100%;
background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
padding: 20px;
}
.map-container{
position: relative;
width: calc(100% - 50vw);
height: 100%;
}
}
/deep/ .common-title{
.icon-title{
width: 20px;
vertical-align: middle;
}
.title{
font-weight: 500;
font-size: 20px;
color: @font-color;
line-height: 20px;
vertical-align: middle;
margin-left: 12px;
}
.bg{
width: 100%;
}
}
//列表
.table-list{
/deep/.list-of-body{
height: calc(100% - 50px);
box-sizing: border-box;
ul{
display: flex;
align-items: flex-start;
font-size: 16px;
padding-left: 20px;
box-sizing: border-box;
li{
line-height: 40px;
&.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;
padding-right: 10px;
}
}
}
.body-title{
color: @font-color;
}
.body-content{
height: calc(100% - 40px);
overflow-y: hidden;
.body-item{
height: 40px;
background-color: @party-bg-gray;
margin-bottom: 3px;
color: @font-color;
}
}
}
}
// echarts 样式
.echartspanel{
height: calc(100% - 50vh);
padding-top: 20px;
.echarts-box{
height: 100%;
width: 50%;
display: inline-block;
box-sizing: border-box;
&.left{
padding-right: 10px;
float: left;
}
&.right{
padding-left: 10px;
float: right;
}
.echarts-panel{
background:@party-white;
border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px;
height: 100%;
padding: 20px;
}
}
}
}
</style>
\ No newline at end of file
This diff is collapsed.
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