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

地图不见、机构管理

parent 6904ac15
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select <el-select
v-model="form.orgId" v-model="form.orgId"
filterable filterable
placeholder="请选择所属单位" placeholder="请选择所属单位"
clearable> clearable>
<el-option <el-option
......
This diff is collapsed.
<template> <template>
<div id="mapDiv"></div> <div id="mapDiv"></div>
</template> </template>
<script> <script>
// import "echarts/map/js/china"; // import "echarts/map/js/china";
import echarts from 'echarts' import echarts from 'echarts'
import { chinaJson } from "@/map/china"; import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson); echarts.registerMap("china", chinaJson);
export default { export default {
name: "maps", name: "maps",
data() { data() {
return { return {
dataList: [], dataList: [],
}; };
}, },
mounted() { mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
getList() { getList() {
this.$https({ this.$https({
method: "post", method: "post",
url: "tBoardStatistic/getBoardProvincePlayTotalList", url: "tBoardStatistic/getBoardProvincePlayTotalList",
authType: this.backToken, authType: this.backToken,
}) })
.then((res) => { .then((res) => {
if (res.status == 200) { if (res.status == 200) {
if (res.data.resultCode == 200) { if (res.data.resultCode == 200) {
this.dataList = res.data.data; this.dataList = res.data.data;
} else { } else {
this.dataList = []; this.dataList = [];
} }
} else { } else {
this.dataList = []; this.dataList = [];
} }
this.init(); this.init();
}) })
.catch((err) => { .catch((err) => {
this.$message.error(err.message); this.$message.error(err.message);
this.init(); this.init();
}); });
}, },
init() { init() {
let option = { let option = {
tooltip: { tooltip: {
triggerOn: "click", triggerOn: "click",
formatter: function (e, t, n) { formatter: function (e, t, n) {
return 0.5 == e.value return 0.5 == e.value
? e.name + ":播放量" ? e.name + ":播放量"
: e.seriesName + "<br />" + e.name + ":" + e.value; : e.seriesName + "<br />" + e.name + ":" + e.value;
}, },
}, },
visualMap: [ visualMap: [
{ {
dimension: 0, dimension: 0,
right: 20, right: 20,
bottom: 20, bottom: 20,
itemWidth: 16, itemWidth: 16,
itemHeight: "200px", itemHeight: "200px",
orient: "horizontal", orient: "horizontal",
text: ["由高到低", "播放量"], text: ["由高到低", "播放量"],
backgroundColor: "rgba(0,28,66,0.6)", backgroundColor: "rgba(0,28,66,0.6)",
padding: [15, 10], padding: [15, 10],
textStyle: { textStyle: {
color: "rgba(255,255,255,1)", color: "rgba(255,255,255,1)",
}, },
inRange: { inRange: {
color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"], color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
}, },
}, },
], ],
geo: { geo: {
map: "china", map: "china",
roam: !1, roam: !1,
scaleLimit: { scaleLimit: {
min: 1, min: 1,
max: 2, max: 2,
}, },
roam: true, //是否开启平游或缩放 roam: true, //是否开启平游或缩放
scaleLimit: { scaleLimit: {
//滚轮缩放的极限控制 //滚轮缩放的极限控制
min: 1, min: 1,
max: 2, max: 2,
}, },
zoom: 1, zoom: 1,
top: 100, top: 100,
left: "10%", left: "10%",
label: { label: {
normal: { normal: {
show: !0, show: !0,
fontSize: "12", fontSize: "12",
color: "#fff", color: "#fff",
}, },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
borderColor: "rgba(0, 0, 0, 0.2)", borderColor: "rgba(0, 0, 0, 0.2)",
}, },
emphasis: { emphasis: {
areaColor: "#f2d5ad", areaColor: "#f2d5ad",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
borderWidth: 0, borderWidth: 0,
}, },
}, },
regions: [ regions: [
{ {
name: "南海诸岛", name: "南海诸岛",
itemStyle: { itemStyle: {
// 隐藏地图 // 隐藏地图
normal: { normal: {
opacity: 0, // 为 0 时不绘制该图形 opacity: 0, // 为 0 时不绘制该图形
}, },
}, },
label: { label: {
show: false, // 隐藏文字 show: false, // 隐藏文字
}, },
}, },
], ],
}, },
series: [ series: [
{ {
name: "播放量", name: "播放量",
type: "map", type: "map",
geoIndex: 0, geoIndex: 0,
data: this.dataList, data: this.dataList,
}, },
], ],
}; };
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv")); let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option); echartsDiv.setOption(option);
}, },
}, },
}; };
</script> </script>
<style lang="less"> <style lang="less">
#mapDiv { #mapDiv {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
<template> <template>
<div class="map-box"> <div id="map-box">
<span id="back" v-if="parentInfo.length !== 1" @click="handleBack()" <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
>返回</span >返回</span
> >
...@@ -118,14 +118,15 @@ export default { ...@@ -118,14 +118,15 @@ export default {
map: this.parentInfo.length === 1 ? "china" : "map", map: this.parentInfo.length === 1 ? "china" : "map",
roam: !1, roam: !1,
roam: true, //是否开启平游或缩放 roam: true, //是否开启平游或缩放
scaleLimit: { // scaleLimit: {
//滚轮缩放的极限控制 // //滚轮缩放的极限控制
min: 1 // min: 1
}, // },
zoom: 1.1, zoom: 1.1,
top: 100, top: 110,
left: "20%", bottom:0,
left: "24%",
label: { label: {
normal: { normal: {
show: !0, show: !0,
...@@ -159,6 +160,10 @@ export default { ...@@ -159,6 +160,10 @@ export default {
}, },
}, },
}, },
emphasis: {
// color: "#ffffff",
show: true,
},
itemStyle: { itemStyle: {
normal: { normal: {
borderColor: "rgba(0, 0, 0, 0.2)", borderColor: "rgba(0, 0, 0, 0.2)",
...@@ -195,7 +200,7 @@ export default { ...@@ -195,7 +200,7 @@ export default {
], ],
}; };
let echartsDiv = this.$echarts.init(document.getElementById("mapDiv")); let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
echartsDiv.setOption(option); echartsDiv.setOption(option, true);
echartsDiv.on("click", this.echartsMapClick); echartsDiv.on("click", this.echartsMapClick);
}, },
handleBack() { handleBack() {
...@@ -262,7 +267,7 @@ export default { ...@@ -262,7 +267,7 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.map-box { #map-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
#back { #back {
......
<template> <template>
<div class="overview-wrapper height100"> <div class="overview-wrapper height100">
<div class="middel-part"> <div class="middel-part">
<!--地区展板播放统计--> <!--地区展板播放统计-->
<areas class="table-list"></areas> <areas class="table-list"></areas>
<!--中间地图--> <!--中间地图-->
<div class="map-container"> <div class="map-container">
<borderNums></borderNums> <borderNums></borderNums>
<mapDiv></mapDiv> <mapDiv></mapDiv>
</div> </div>
<!--全国点播板块--> <!--全国点播板块-->
<top10 class="table-list"></top10> <top10 class="table-list"></top10>
</div> </div>
<div class="echartspanel"> <div class="echartspanel">
<div class="echarts-box left"> <div class="echarts-box left">
<demand class="echarts-panel"></demand> <demand class="echarts-panel"></demand>
</div> </div>
<div class="echarts-box right"> <div class="echarts-box right">
<interact class="echarts-panel"></interact> <interact class="echarts-panel"></interact>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import {
demand, demand,
interact, interact,
areas, areas,
top10, top10,
mapDiv, mapDiv,
borderNums borderNums
} from './components' } from './components'
export default { export default {
data(){ data(){
return { return {
} }
}, },
components:{demand, interact , areas, top10, mapDiv, borderNums}, components:{demand, interact , areas, top10, mapDiv, borderNums},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.overview-wrapper{ .overview-wrapper{
.middel-part{ .middel-part{
display: flex; display: flex;
height: 50vh; height: 50vh;
justify-content: space-between; justify-content: space-between;
overflow:hidden; overflow:hidden;
.table-list{ .table-list{
width: 25vw; width: 25vw;
height: 100%; height: 100%;
background: @party-white; background: @party-white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
} }
.map-container{ .map-container{
position: relative; position: relative;
width: calc(100% - 50vw); width: calc(100% - 50vw);
height: 100%; height: 100%;
} }
} }
/deep/ .common-title{ /deep/ .common-title{
.icon-title{ .icon-title{
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
} }
.title{ .title{
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
color: @font-color; color: @font-color;
line-height: 20px; line-height: 20px;
vertical-align: middle; vertical-align: middle;
margin-left: 12px; margin-left: 12px;
} }
.bg{ .bg{
width: 100%; width: 100%;
} }
} }
//列表 //列表
.table-list{ .table-list{
/deep/.list-of-body{ /deep/.list-of-body{
height: calc(100% - 50px); height: calc(100% - 50px);
box-sizing: border-box; box-sizing: border-box;
ul{ ul{
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
font-size: 16px; font-size: 16px;
padding-left: 20px; padding-left: 20px;
box-sizing: border-box; box-sizing: border-box;
li{ li{
line-height: 40px; line-height: 40px;
&.f1{ &.f1{
width: 10%; width: 10%;
} }
&.f2{ &.f2{
width: 20%; width: 20%;
} }
&.f3{ &.f3{
width: 30%; width: 30%;
} }
&.f5{ &.f5{
width: 50%; width: 50%;
} }
&.f6{ &.f6{
width: 60%; width: 60%;
} }
&.f7{ &.f7{
width: 70%; width: 70%;
} }
div.title{ div.title{
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-right: 10px; padding-right: 10px;
} }
} }
} }
.body-title{ .body-title{
color: @font-color; color: @font-color;
} }
.body-content{ .body-content{
height: calc(100% - 40px); height: calc(100% - 40px);
overflow-y: hidden; overflow-y: hidden;
.body-item{ .body-item{
height: 40px; height: 40px;
background-color: @party-bg-gray; background-color: @party-bg-gray;
margin-bottom: 3px; margin-bottom: 3px;
color: @font-color; color: @font-color;
} }
} }
} }
} }
// echarts 样式 // echarts 样式
.echartspanel{ .echartspanel{
height: calc(100% - 50vh); height: calc(100% - 50vh);
padding-top: 20px; padding-top: 20px;
.echarts-box{ .echarts-box{
height: 100%; height: 100%;
width: 50%; width: 50%;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
&.left{ &.left{
padding-right: 10px; padding-right: 10px;
float: left; float: left;
} }
&.right{ &.right{
padding-left: 10px; padding-left: 10px;
float: right; float: right;
} }
.echarts-panel{ .echarts-panel{
background:@party-white; background:@party-white;
border: 1px solid #FFFFFF; border: 1px solid #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
border-radius: 8px; border-radius: 8px;
height: 100%; height: 100%;
padding: 20px; padding: 20px;
} }
} }
} }
} }
</style> </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