代码调试
This commit is contained in:
BianLzhaoMin
parent
946c4f0451
commit
6b9242bceb
|
|
@ -19,7 +19,7 @@ var proxyUrl = (module.exports = {
|
|||
proxyTable: {
|
||||
'/screen': {
|
||||
// target: 'http://112.29.103.165:21626',//重庆
|
||||
target: 'http://192.168.0.14:21624', //测试
|
||||
target: 'http://192.168.2.216:39080', //测试
|
||||
// target: 'http://10.40.92.74:8080',
|
||||
changeOrigin: true,
|
||||
// secure: true, //如果是https接口，需要配置这个参数
|
||||
|
|
|
|||
87
src/App.vue
87
src/App.vue
|
|
@ -9,12 +9,25 @@ export default {
|
|||
created() {
|
||||
// console.log(this.$route)
|
||||
// localStorage.setItem('token', this.$route.query.token)
|
||||
var link = document.querySelector("link[rel*='icon']") || document.createElement("link");
|
||||
link.type = "image/x-icon";
|
||||
link.rel = "shortcut icon";
|
||||
link.href = require('./assets/img/myImage/logo.png');
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
|
||||
var link =
|
||||
document.querySelector("link[rel*='icon']") ||
|
||||
document.createElement('link')
|
||||
link.type = 'image/x-icon'
|
||||
link.rel = 'shortcut icon'
|
||||
link.href = require('./assets/img/myImage/logo.png')
|
||||
document.getElementsByTagName('head')[0].appendChild(link)
|
||||
},
|
||||
|
||||
watch: {
|
||||
$route: {
|
||||
handler(newValue) {
|
||||
console.log(newValue, '路由监听--')
|
||||
if (newValue.query.token) {
|
||||
localStorage.setItem('token', newValue.query.token)
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -22,7 +35,7 @@ export default {
|
|||
.el-dialog {
|
||||
// 背景色透明
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
// background-color: transparent;
|
||||
// background-color: transparent;
|
||||
// background-color: #000;
|
||||
background-image: url('./assets/img/dialog/window.png');
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -43,76 +56,78 @@ export default {
|
|||
|
||||
.el-table th {
|
||||
// #253855 #30619B 背景色从上到下渐变
|
||||
background: linear-gradient(to bottom, #2B313D, #3267A7);
|
||||
background: linear-gradient(to bottom, #2b313d, #3267a7);
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #84FCFD !important;
|
||||
border-bottom: 1px solid #84fcfd !important;
|
||||
}
|
||||
.el-table tr {
|
||||
background-color: #335684;
|
||||
color: #fff;
|
||||
}
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #25447D;
|
||||
background-color: #25447d;
|
||||
color: #fff;
|
||||
}
|
||||
.el-table td,.building-top .el-table th.is-leaf {
|
||||
border-bottom: 1px solid #6983A5;
|
||||
.el-table td,
|
||||
.building-top .el-table th.is-leaf {
|
||||
border-bottom: 1px solid #6983a5;
|
||||
}
|
||||
.el-table::before{
|
||||
border-bottom: 1px solid #6983A5;
|
||||
background-color: #6983A5;
|
||||
.el-table::before {
|
||||
border-bottom: 1px solid #6983a5;
|
||||
background-color: #6983a5;
|
||||
height: 1px;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
||||
background-color: #6983A5;
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: #6983a5;
|
||||
}
|
||||
.el-pagination__total {
|
||||
color: #E1E3E6;
|
||||
color: #e1e3e6;
|
||||
}
|
||||
.el-pagination__jump {
|
||||
color: #E1E3E6;
|
||||
color: #e1e3e6;
|
||||
}
|
||||
.el-input__inner {
|
||||
background-color: transparent;
|
||||
border: 1px solid #77E2E7;
|
||||
color: #E1E3E6;
|
||||
border: 1px solid #77e2e7;
|
||||
color: #e1e3e6;
|
||||
}
|
||||
.el-pagination__sizes .el-input .el-input__inner {
|
||||
color: #E3E4E7;
|
||||
border: 1px solid #E3E4E7;
|
||||
color: #e3e4e7;
|
||||
border: 1px solid #e3e4e7;
|
||||
}
|
||||
.el-pagination__editor.el-input .el-input__inner {
|
||||
color: #E3E4E7;
|
||||
border: 1px solid #E3E4E7;
|
||||
color: #e3e4e7;
|
||||
border: 1px solid #e3e4e7;
|
||||
}
|
||||
.el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
|
||||
color: #E3E4E7;
|
||||
border: 1px solid #E3E4E7;
|
||||
.el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
color: #e3e4e7;
|
||||
border: 1px solid #e3e4e7;
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-pagination.is-background .btn-next {
|
||||
color: #E3E4E7;
|
||||
border: 1px solid #E3E4E7;
|
||||
color: #e3e4e7;
|
||||
border: 1px solid #e3e4e7;
|
||||
background-color: transparent;
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #98F4FB;
|
||||
background-color: #98f4fb;
|
||||
color: #000;
|
||||
}
|
||||
.el-button--primary {
|
||||
background-color: #84FCFD;
|
||||
border: #84FCFD;
|
||||
background-color: #84fcfd;
|
||||
border: #84fcfd;
|
||||
color: #285050;
|
||||
}
|
||||
.el-button--default {
|
||||
background-color: transparent;
|
||||
border: 1px solid #84FCFD;
|
||||
color: #D5D6DA;
|
||||
border: 1px solid #84fcfd;
|
||||
color: #d5d6da;
|
||||
}
|
||||
.el-table__empty-block {
|
||||
background-color: #335684;
|
||||
.el-table__empty-text {
|
||||
color: #D5D6DA;
|
||||
color: #d5d6da;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { POST, GET } from './index.js'
|
|||
const URL_TYPE_LIST = '/material/returnOfMaterialsInfo/getTypeList'
|
||||
const URL_DETAILS = '/material/base/largeScreen/home/getMaterialReqData/details'
|
||||
const URL_RETURN_DETAILS =
|
||||
'/material/base/largeScreen/home/getMaterialReturnData/details'
|
||||
'/base/largeScreen/home/getMaterialReturnData/details'
|
||||
const URL_UNIT_LIST = '/material/agreementInfo/getUnitList'
|
||||
const URL_PROJECT_LIST = '/material/agreementInfo/getProjectList'
|
||||
const URL_SCRAP_ANALYSIS =
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ axios.defaults.timeout = 30000
|
|||
|
||||
// 默认配置
|
||||
// axios.defaults.baseURL = process.env.API_ROOT;
|
||||
axios.defaults.baseURL = 'http://192.168.0.56:21627/bigScreen'
|
||||
// axios.defaults.baseURL = 'http://192.168.0.56:21627/bigScreen'
|
||||
axios.defaults.baseURL = 'screen'
|
||||
|
||||
axios.interceptors.request.use(
|
||||
(config) => {
|
||||
|
|
|
|||
|
|
@ -48,3 +48,4 @@ export const getMaintenanceWarningApi = (params) =>
|
|||
//各公司机具保有量
|
||||
export const getTotalOwnershipByCompany = (params) =>
|
||||
POST(`/material/base/largeScreen/home/getTotalOwnershipByCompany`)
|
||||
//各公司机具保有量
|
||||
|
|
|
|||
|
|
@ -1,471 +1,467 @@
|
|||
<template>
|
||||
<div class="centerTopPage">
|
||||
<div class="mapBox">
|
||||
<div id="mapEcharts"></div>
|
||||
</div>
|
||||
<div class="centerTopPage">
|
||||
<div class="mapBox">
|
||||
<div id="mapEcharts"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
let mapChinaJson = require('@/untils/china.json')
|
||||
let ningxiaJson = require('@/untils/ningxia.json')
|
||||
import { getEquipmentDisByMapApi } from "../../api/screen";
|
||||
|
||||
export default {
|
||||
name: 'centerTopPage',
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
zoom: 1.39,
|
||||
zoom2: 1.2,
|
||||
mapEcharts: null,
|
||||
mapEcharts2: null,
|
||||
mapJson: null,
|
||||
pointArea: [],
|
||||
pointAll: [],
|
||||
companyList: [],
|
||||
companyAreaList: [],
|
||||
isCity: 0,
|
||||
cityCount: [],
|
||||
gozoom: 1
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getCompanyList()
|
||||
// this.getCompanyAreaList()
|
||||
// this.getCityCount()
|
||||
},
|
||||
mounted() {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
let mapChinaJson = require('@/untils/china.json')
|
||||
let ningxiaJson = require('@/untils/ningxia.json')
|
||||
import { getEquipmentDisByMapApi } from '../../api/screen'
|
||||
|
||||
export default {
|
||||
name: 'centerTopPage',
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
zoom: 1.39,
|
||||
zoom2: 1.2,
|
||||
mapEcharts: null,
|
||||
mapEcharts2: null,
|
||||
mapJson: null,
|
||||
pointArea: [],
|
||||
pointAll: [],
|
||||
companyList: [],
|
||||
companyAreaList: [],
|
||||
isCity: 0,
|
||||
cityCount: [],
|
||||
gozoom: 1,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getCompanyList()
|
||||
// this.getCompanyAreaList()
|
||||
// this.getCityCount()
|
||||
},
|
||||
mounted() {
|
||||
// this.getEquipmentDisByMapApiPage()
|
||||
this.getInitData()
|
||||
this.getInitData()
|
||||
},
|
||||
methods: {
|
||||
getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then((res) => {
|
||||
console.log('res=====', res)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then(res => {
|
||||
console.log('res=====', res);
|
||||
})
|
||||
},
|
||||
getCompanyList() {
|
||||
let params = {
|
||||
provinceId: ''
|
||||
getCompanyList() {
|
||||
let params = {
|
||||
provinceId: '',
|
||||
}
|
||||
getCompanyListByProvinceId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyList = res.data
|
||||
}
|
||||
getCompanyListByProvinceId(params).then(res => {
|
||||
if (res.success && res.data) {
|
||||
this.companyList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getCompanyAreaList() {
|
||||
let params = {
|
||||
areaId: ''
|
||||
})
|
||||
},
|
||||
getCompanyAreaList() {
|
||||
let params = {
|
||||
areaId: '',
|
||||
}
|
||||
getCompanyListByAreaId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyAreaList = res.data
|
||||
}
|
||||
getCompanyListByAreaId(params).then(res => {
|
||||
if (res.success && res.data) {
|
||||
this.companyAreaList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
getInitData() {
|
||||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
||||
this.mapJson = mapChinaJson
|
||||
echarts.registerMap('china', this.mapJson)
|
||||
this.setMapOption('china')
|
||||
// this.setMapOption2()
|
||||
},
|
||||
setMapOption(name) {
|
||||
var option = {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
|
||||
getInitData() {
|
||||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
||||
this.mapJson = mapChinaJson
|
||||
echarts.registerMap('china', this.mapJson)
|
||||
this.setMapOption('china')
|
||||
// this.setMapOption2()
|
||||
},
|
||||
setMapOption(name) {
|
||||
var option = {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'MAP',
|
||||
type: 'map3D',
|
||||
map: name,
|
||||
zlevel: -10,
|
||||
boxWidth: 150,
|
||||
boxHeight:60,
|
||||
boxDepth: 90,//地图倾斜度
|
||||
regionHeight: 5,//地图厚度
|
||||
label: {
|
||||
show: true,//是否显示市
|
||||
textStyle: {
|
||||
color: "#fff",//文字颜色
|
||||
fontSize: 14,//文字大小
|
||||
// fontFamily: '微软雅黑',
|
||||
backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
//三维视觉属性
|
||||
itemStyle: {
|
||||
opacity:1,
|
||||
color: 'rgba(35, 72, 174,0.5)',//地图颜色
|
||||
borderWidth: 1.5,
|
||||
borderColor: 'rgb(125, 239, 250)'
|
||||
},
|
||||
// 鼠标hover高亮
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,//是否显示标签
|
||||
textStyle: {
|
||||
color: '#fff',//高亮文字颜色
|
||||
fontSize: 16,
|
||||
fontFamily: '微软雅黑'
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#7BE7FC',
|
||||
borderColor:'#7BE7FC',
|
||||
borderWidth:3,
|
||||
}
|
||||
},
|
||||
shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
|
||||
// 'color' 只显示颜色，不受光照等其它因素的影响。
|
||||
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
|
||||
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
|
||||
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
|
||||
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
|
||||
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
|
||||
light: {
|
||||
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
|
||||
main: {
|
||||
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
||||
color: '#fff', // 主光源的颜色。[ default: #fff ]
|
||||
intensity: 1.2, // 主光源的强度。[ default: 1 ]
|
||||
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
|
||||
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
|
||||
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
|
||||
beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
|
||||
},
|
||||
ambient: {
|
||||
// 全局的环境光设置。
|
||||
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
||||
intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
|
||||
}
|
||||
},
|
||||
groundplane: {
|
||||
show: false
|
||||
},
|
||||
viewControl: {
|
||||
//distance: 150,// 地图视角 控制初始大小
|
||||
//rotateSensitivity: 1,// 旋转
|
||||
//zoomSensitivity: 1,// 缩放
|
||||
projection: 'perspective',
|
||||
autoRotate: false,
|
||||
damping: 0,
|
||||
rotateSensitivity: 2,//旋转操作的灵敏度
|
||||
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
|
||||
zoomSensitivity:2, //缩放操作的灵敏度
|
||||
panSensitivity:2, //平移操作的灵敏度
|
||||
panMouseButton: 'right', //平移操作使用的鼠标按键
|
||||
distance:40, //默认视角距离主体的距离
|
||||
minDistance: 100,
|
||||
maxDistance: 170,
|
||||
minAlpha:30,
|
||||
maxAlpha:80,
|
||||
minBeta:-25,
|
||||
maxBeta:45,
|
||||
center:[0,0,0],
|
||||
animation: true,
|
||||
animationDurationUpdate: 1000,
|
||||
animationEasingUpdate: 'cubicInOut'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'MAP',
|
||||
type: 'map3D',
|
||||
map: name,
|
||||
zlevel: -10,
|
||||
boxWidth: 150,
|
||||
boxHeight: 60,
|
||||
boxDepth: 90, //地图倾斜度
|
||||
regionHeight: 5, //地图厚度
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
textStyle: {
|
||||
color: '#fff', //文字颜色
|
||||
fontSize: 14, //文字大小
|
||||
// fontFamily: '微软雅黑',
|
||||
backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.mapEcharts.setOption(option);
|
||||
},
|
||||
setMapOption2(){
|
||||
var option = {
|
||||
geo: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: 0,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#7BE7FC',
|
||||
shadowColor: '#244AAF',
|
||||
borderWidth: 2,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 50,
|
||||
areaColor: '#458FD6',
|
||||
},
|
||||
},
|
||||
//三维视觉属性
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
color: 'rgba(35, 72, 174,0.5)', //地图颜色
|
||||
borderWidth: 1.5,
|
||||
borderColor: 'rgb(125, 239, 250)',
|
||||
},
|
||||
// 鼠标hover高亮
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true, //是否显示标签
|
||||
textStyle: {
|
||||
color: '#fff', //高亮文字颜色
|
||||
fontSize: 16,
|
||||
fontFamily: '微软雅黑',
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -1,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '51.4%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(44, 89, 199,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 25,
|
||||
areaColor: 'rgba(44, 89, 199,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -2,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '52.8%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -3,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '54.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.8)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 15,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50%'],
|
||||
layoutSize: '150%',
|
||||
zoom: 1,
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#2C59C7',
|
||||
borderColor: '#7BE7FC',
|
||||
borderWidth: 2,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#7BE7FC',
|
||||
// areaColor: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#0C1D75', // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#7BE7FC', // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
borderColor: '#7BE7FC',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.mapEcharts.setOption(option);
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#7BE7FC',
|
||||
borderColor: '#7BE7FC',
|
||||
borderWidth: 3,
|
||||
},
|
||||
},
|
||||
shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
|
||||
// 'color' 只显示颜色，不受光照等其它因素的影响。
|
||||
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
|
||||
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
|
||||
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
|
||||
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
|
||||
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
|
||||
light: {
|
||||
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
|
||||
main: {
|
||||
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
||||
color: '#fff', // 主光源的颜色。[ default: #fff ]
|
||||
intensity: 1.2, // 主光源的强度。[ default: 1 ]
|
||||
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
|
||||
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
|
||||
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
|
||||
beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
|
||||
},
|
||||
ambient: {
|
||||
// 全局的环境光设置。
|
||||
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
||||
intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
|
||||
},
|
||||
},
|
||||
groundplane: {
|
||||
show: false,
|
||||
},
|
||||
viewControl: {
|
||||
//distance: 150,// 地图视角 控制初始大小
|
||||
//rotateSensitivity: 1,// 旋转
|
||||
//zoomSensitivity: 1,// 缩放
|
||||
projection: 'perspective',
|
||||
autoRotate: false,
|
||||
damping: 0,
|
||||
rotateSensitivity: 2, //旋转操作的灵敏度
|
||||
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
|
||||
zoomSensitivity: 2, //缩放操作的灵敏度
|
||||
panSensitivity: 2, //平移操作的灵敏度
|
||||
panMouseButton: 'right', //平移操作使用的鼠标按键
|
||||
distance: 40, //默认视角距离主体的距离
|
||||
minDistance: 100,
|
||||
maxDistance: 170,
|
||||
minAlpha: 30,
|
||||
maxAlpha: 80,
|
||||
minBeta: -25,
|
||||
maxBeta: 45,
|
||||
center: [0, 0, 0],
|
||||
animation: true,
|
||||
animationDurationUpdate: 1000,
|
||||
animationEasingUpdate: 'cubicInOut',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(option)
|
||||
},
|
||||
setMapOption2() {
|
||||
var option = {
|
||||
geo: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: 0,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#7BE7FC',
|
||||
shadowColor: '#244AAF',
|
||||
borderWidth: 2,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 50,
|
||||
areaColor: '#458FD6',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -1,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '51.4%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(44, 89, 199,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 25,
|
||||
areaColor: 'rgba(44, 89, 199,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -2,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '52.8%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -3,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '54.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.8)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 15,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50%'],
|
||||
layoutSize: '150%',
|
||||
zoom: 1,
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#2C59C7',
|
||||
borderColor: '#7BE7FC',
|
||||
borderWidth: 2,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#7BE7FC',
|
||||
// areaColor: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#0C1D75', // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#7BE7FC', // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
borderColor: '#7BE7FC',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.centerTopPage {
|
||||
width: 100%;
|
||||
height: 627px;
|
||||
// background:palegoldenrod;
|
||||
margin-bottom: 2%;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconMap {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.centerTopPage {
|
||||
.buttonTop {
|
||||
width: 100%;
|
||||
height: 627px;
|
||||
// background:palegoldenrod;
|
||||
margin-bottom: 2%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.buttom1 {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
color: #55f3fb;
|
||||
// background: url(../../assets/img/checked.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttom1.on {
|
||||
color: #0095ff;
|
||||
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
}
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 97%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconMap {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.buttonTop {
|
||||
#mapEcharts {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
.buttom1 {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
color: #55f3fb;
|
||||
// background: url(../../assets/img/checked.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttom1.on {
|
||||
color: #0095ff;
|
||||
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
}
|
||||
.mapBox {
|
||||
#mapEcharts2 {
|
||||
width: 100%;
|
||||
height: 97%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
#mapEcharts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#mapEcharts2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
z-index: 1000;
|
||||
}
|
||||
.label-box {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 40px;
|
||||
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 15px;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.item:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.scrollTooltip::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.scrollTooltip::-webkit-scrollbar-thumb {
|
||||
background-color: #1653a6;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
||||
}
|
||||
.itemColor {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.itemColor:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
.label-box {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
left: 40px;
|
||||
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 15px;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.item:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.scrollTooltip::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.scrollTooltip::-webkit-scrollbar-thumb {
|
||||
background-color: #1653a6;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
||||
}
|
||||
.itemColor {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.itemColor:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,467 @@
|
|||
<template>
|
||||
<div class="centerTopPage">
|
||||
<div class="mapBox">
|
||||
<div id="mapEcharts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
let mapChinaJson = require('@/untils/china.json')
|
||||
let ningxiaJson = require('@/untils/ningxia.json')
|
||||
import { getEquipmentDisByMapApi } from '../../api/screen'
|
||||
|
||||
export default {
|
||||
name: 'centerTopPage',
|
||||
data() {
|
||||
return {
|
||||
type: 1,
|
||||
zoom: 1.39,
|
||||
zoom2: 1.2,
|
||||
mapEcharts: null,
|
||||
mapEcharts2: null,
|
||||
mapJson: null,
|
||||
pointArea: [],
|
||||
pointAll: [],
|
||||
companyList: [],
|
||||
companyAreaList: [],
|
||||
isCity: 0,
|
||||
cityCount: [],
|
||||
gozoom: 1,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getCompanyList()
|
||||
// this.getCompanyAreaList()
|
||||
// this.getCityCount()
|
||||
},
|
||||
mounted() {
|
||||
// this.getEquipmentDisByMapApiPage()
|
||||
this.getInitData()
|
||||
},
|
||||
methods: {
|
||||
getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then((res) => {
|
||||
console.log('res=====', res)
|
||||
})
|
||||
},
|
||||
getCompanyList() {
|
||||
let params = {
|
||||
provinceId: '',
|
||||
}
|
||||
getCompanyListByProvinceId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getCompanyAreaList() {
|
||||
let params = {
|
||||
areaId: '',
|
||||
}
|
||||
getCompanyListByAreaId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyAreaList = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getInitData() {
|
||||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
||||
this.mapJson = mapChinaJson
|
||||
echarts.registerMap('china', this.mapJson)
|
||||
this.setMapOption('china')
|
||||
// this.setMapOption2()
|
||||
},
|
||||
setMapOption(name) {
|
||||
var option = {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'MAP',
|
||||
type: 'map3D',
|
||||
map: name,
|
||||
zlevel: -10,
|
||||
boxWidth: 150,
|
||||
boxHeight: 60,
|
||||
boxDepth: 90, //地图倾斜度
|
||||
regionHeight: 5, //地图厚度
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
textStyle: {
|
||||
color: '#fff', //文字颜色
|
||||
fontSize: 14, //文字大小
|
||||
// fontFamily: '微软雅黑',
|
||||
backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
|
||||
},
|
||||
},
|
||||
//三维视觉属性
|
||||
itemStyle: {
|
||||
opacity: 1,
|
||||
color: 'rgba(35, 72, 174,0.5)', //地图颜色
|
||||
borderWidth: 1.5,
|
||||
borderColor: 'rgb(125, 239, 250)',
|
||||
},
|
||||
// 鼠标hover高亮
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true, //是否显示标签
|
||||
textStyle: {
|
||||
color: '#fff', //高亮文字颜色
|
||||
fontSize: 16,
|
||||
fontFamily: '微软雅黑',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#7BE7FC',
|
||||
borderColor: '#7BE7FC',
|
||||
borderWidth: 3,
|
||||
},
|
||||
},
|
||||
shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
|
||||
// 'color' 只显示颜色，不受光照等其它因素的影响。
|
||||
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
|
||||
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
|
||||
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
|
||||
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
|
||||
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
|
||||
light: {
|
||||
// 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
|
||||
main: {
|
||||
// 场景主光源的设置，在 globe 组件中就是太阳光。
|
||||
color: '#fff', // 主光源的颜色。[ default: #fff ]
|
||||
intensity: 1.2, // 主光源的强度。[ default: 1 ]
|
||||
shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
|
||||
// shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
|
||||
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
|
||||
beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
|
||||
},
|
||||
ambient: {
|
||||
// 全局的环境光设置。
|
||||
color: '#fff', // 环境光的颜色。[ default: #fff ]
|
||||
intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
|
||||
},
|
||||
},
|
||||
groundplane: {
|
||||
show: false,
|
||||
},
|
||||
viewControl: {
|
||||
//distance: 150,// 地图视角 控制初始大小
|
||||
//rotateSensitivity: 1,// 旋转
|
||||
//zoomSensitivity: 1,// 缩放
|
||||
projection: 'perspective',
|
||||
autoRotate: false,
|
||||
damping: 0,
|
||||
rotateSensitivity: 2, //旋转操作的灵敏度
|
||||
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
|
||||
zoomSensitivity: 2, //缩放操作的灵敏度
|
||||
panSensitivity: 2, //平移操作的灵敏度
|
||||
panMouseButton: 'right', //平移操作使用的鼠标按键
|
||||
distance: 40, //默认视角距离主体的距离
|
||||
minDistance: 100,
|
||||
maxDistance: 170,
|
||||
minAlpha: 30,
|
||||
maxAlpha: 80,
|
||||
minBeta: -25,
|
||||
maxBeta: 45,
|
||||
center: [0, 0, 0],
|
||||
animation: true,
|
||||
animationDurationUpdate: 1000,
|
||||
animationEasingUpdate: 'cubicInOut',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(option)
|
||||
},
|
||||
setMapOption2() {
|
||||
var option = {
|
||||
geo: [
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: 0,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#7BE7FC',
|
||||
shadowColor: '#244AAF',
|
||||
borderWidth: 2,
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 50,
|
||||
areaColor: '#458FD6',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -1,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '51.4%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(44, 89, 199,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 25,
|
||||
areaColor: 'rgba(44, 89, 199,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -2,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '52.8%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.5)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 20,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
zlevel: -3,
|
||||
zoom: 1,
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '54.2%'],
|
||||
layoutSize: '150%',
|
||||
roam: false,
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(123, 231, 252,1)',
|
||||
shadowColor: 'rgba(195,26,59,0.8)',
|
||||
shadowOffsetY: 0,
|
||||
shadowBlur: 15,
|
||||
areaColor: 'rgba(5,21,35,0.1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
aspectScale: 0.96,
|
||||
layoutCenter: ['50%', '50%'],
|
||||
layoutSize: '150%',
|
||||
zoom: 1,
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#2C59C7',
|
||||
borderColor: '#7BE7FC',
|
||||
borderWidth: 2,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#7BE7FC',
|
||||
// areaColor: {
|
||||
// type: 'linear',
|
||||
// x: 0,
|
||||
// y: 0,
|
||||
// x2: 0,
|
||||
// y2: 1,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: '#0C1D75', // 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#7BE7FC', // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
borderColor: '#7BE7FC',
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.centerTopPage {
|
||||
width: 100%;
|
||||
height: 627px;
|
||||
// background:palegoldenrod;
|
||||
margin-bottom: 2%;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.iconMap {
|
||||
display: block !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.buttonTop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.buttom1 {
|
||||
width: 110px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
color: #55f3fb;
|
||||
// background: url(../../assets/img/checked.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttom1.on {
|
||||
color: #0095ff;
|
||||
// background: url(../../assets/img/checked_on.png) no-repeat center;
|
||||
background-size: 110px 32px;
|
||||
}
|
||||
.mapBox {
|
||||
width: 100%;
|
||||
height: 97%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
#mapEcharts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#mapEcharts2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
z-index: 1000;
|
||||
}
|
||||
.label-box {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 40px;
|
||||
// background: url('../../assets/img/home/labelBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 15px;
|
||||
.item {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.item:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.scrollTooltip::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.scrollTooltip::-webkit-scrollbar-thumb {
|
||||
background-color: #1653a6;
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 #1653a6;
|
||||
}
|
||||
.itemColor {
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.itemColor:before {
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #06bbf2;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 0px;
|
||||
}
|
||||
.itemColor1:before {
|
||||
background: #06bbf2;
|
||||
}
|
||||
.itemColor2:before {
|
||||
background: #2df0fe;
|
||||
}
|
||||
.itemColor3:before {
|
||||
background: #10e0a5;
|
||||
}
|
||||
.itemColor4:before {
|
||||
background: #dcef4e;
|
||||
}
|
||||
.itemColor5:before {
|
||||
background: #f48413;
|
||||
}
|
||||
.itemColor6:before {
|
||||
background: #fc5403;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
import * as echarts from 'echarts'
|
||||
let mapChinaJson = require('@/untils/china.json')
|
||||
let ningxiaJson = require('@/untils/ningxia.json')
|
||||
import { getEquipmentDisByMapApi } from "../../api/screen";
|
||||
import { getEquipmentDisByMapApi } from '../../api/screen'
|
||||
|
||||
export default {
|
||||
name: 'centerTopPage',
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
companyAreaList: [],
|
||||
isCity: 0,
|
||||
cityCount: [],
|
||||
gozoom: 1
|
||||
gozoom: 1,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -54,21 +54,20 @@ export default {
|
|||
// this.getCityCount()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getEquipmentDisByMapApiPage()
|
||||
this.getInitData()
|
||||
},
|
||||
methods: {
|
||||
getEquipmentDisByMapApiPage() {
|
||||
getEquipmentDisByMapApi().then(res => {
|
||||
console.log('res=====', res);
|
||||
getEquipmentDisByMapApi().then((res) => {
|
||||
console.log('res=====', res)
|
||||
})
|
||||
},
|
||||
getCompanyList() {
|
||||
let params = {
|
||||
provinceId: ''
|
||||
provinceId: '',
|
||||
}
|
||||
getCompanyListByProvinceId(params).then(res => {
|
||||
getCompanyListByProvinceId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyList = res.data
|
||||
}
|
||||
|
|
@ -76,9 +75,9 @@ export default {
|
|||
},
|
||||
getCompanyAreaList() {
|
||||
let params = {
|
||||
areaId: ''
|
||||
areaId: '',
|
||||
}
|
||||
getCompanyListByAreaId(params).then(res => {
|
||||
getCompanyListByAreaId(params).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.companyAreaList = res.data
|
||||
}
|
||||
|
|
@ -162,33 +161,40 @@ export default {
|
|||
},
|
||||
setMapOption() {
|
||||
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示
|
||||
let geoCoordMap = {};
|
||||
let geoCoordMap = {}
|
||||
// 获取地区详细信息
|
||||
let mapFeatures = this.mapJson.features;
|
||||
let mapFeatures = this.mapJson.features
|
||||
// 遍历获取每个地区的经纬度
|
||||
mapFeatures.forEach(function (v, i) {
|
||||
// 获取当前地区名
|
||||
let name = v.properties.name;
|
||||
let name = v.properties.name
|
||||
if (name) {
|
||||
// 获取当前地区的经纬度
|
||||
geoCoordMap[name] = v.properties.center;
|
||||
geoCoordMap[name] = v.properties.center
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
let mapData = [{
|
||||
name: "青海省",
|
||||
value: ['101.778', '36.623'], a: '100'
|
||||
},
|
||||
{
|
||||
name: "宁夏回族自治区",
|
||||
value: ['106.278', '38.466'], a: '100'
|
||||
},
|
||||
{
|
||||
name: '安徽省', value: ['117.283', '31.861'], a: '100'
|
||||
},
|
||||
{
|
||||
name: '湖南省', value: ['112.982', '28.194'], a: '100'
|
||||
}
|
||||
let mapData = [
|
||||
{
|
||||
name: '青海省',
|
||||
value: ['101.778', '36.623'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
value: ['106.278', '38.466'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
value: ['117.283', '31.861'],
|
||||
a: '100',
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
value: ['112.982', '28.194'],
|
||||
a: '100',
|
||||
},
|
||||
]
|
||||
let that = this
|
||||
this.pointAll = this.cityCount
|
||||
|
|
@ -198,143 +204,143 @@ export default {
|
|||
itemStyle: {
|
||||
areaColor: '#F50508',
|
||||
borderColor: '#1773c3', // 区域边框
|
||||
shadowColor: '#1773c3' // 阴影
|
||||
}
|
||||
shadowColor: '#1773c3', // 阴影
|
||||
},
|
||||
})
|
||||
let splitList = [
|
||||
{ name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
|
||||
{
|
||||
name: '天津市',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '上海市',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '重庆市',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '河北省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '河南省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '云南省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '辽宁省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '黑龙江省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '湖南省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '安徽省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '山东省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '新疆维吾尔自治区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '江苏省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '浙江省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '江西省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '湖北省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '广西壮族自治区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '甘肃省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '山西省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '内蒙古自治区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '陕西省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '吉林省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '福建省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '贵州省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '广东省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '青海省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '西藏自治区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '四川省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '宁夏回族自治区',
|
||||
itemStyle: { normal: { areaColor: '#2187FF' } }
|
||||
itemStyle: { normal: { areaColor: '#2187FF' } },
|
||||
},
|
||||
{
|
||||
name: '海南省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '台湾省',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '香港特别行政区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
{
|
||||
name: '澳门特别行政区',
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } }
|
||||
}
|
||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||
},
|
||||
]
|
||||
let imgUrl = require('../../assets/img/myImage/tankuang.png')
|
||||
let echartOption = {
|
||||
|
|
@ -357,32 +363,32 @@ export default {
|
|||
borderWidth: 1, //地图边框宽度
|
||||
shadowColor: 'none',
|
||||
shadowBlur: 10,
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
// 设置扇形的阴影
|
||||
},
|
||||
emphasis: {
|
||||
//选中省份的颜色
|
||||
areaColor: '#765af3',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
color: 'rgba(255,255,255,0.5)'
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
areaColor: '#0a183d',
|
||||
color: '#fff'
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
zlevel: 1,
|
||||
regions: splitList
|
||||
regions: splitList,
|
||||
},
|
||||
{
|
||||
map: 'china',
|
||||
|
|
@ -397,15 +403,15 @@ export default {
|
|||
borderColor: '#6e55dc',
|
||||
borderWidth: 1,
|
||||
opacity: 0.5,
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
},
|
||||
zlevel: -1,
|
||||
silent: true,
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: 'item'
|
||||
}
|
||||
}
|
||||
trigger: 'item',
|
||||
},
|
||||
},
|
||||
],
|
||||
visualMap: {
|
||||
show: false,
|
||||
|
|
@ -415,7 +421,7 @@ export default {
|
|||
seriesIndex: 0,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
|
||||
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'],
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -474,8 +480,8 @@ export default {
|
|||
position: 'right',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
fontWeight: 'bolder',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -487,16 +493,24 @@ export default {
|
|||
symbolSize: [45, 55],
|
||||
symbol: (value, params) => {
|
||||
if (params.name == '安徽省') {
|
||||
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '湖南省') {
|
||||
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '宁夏回族自治区') {
|
||||
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
if (params.name == '青海省') {
|
||||
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
return (
|
||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||
)
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
|
|
@ -514,17 +528,17 @@ export default {
|
|||
padding: [0, 0, -15, 0],
|
||||
formatter: function (params) {
|
||||
return params.data.count
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
data: mapData || []
|
||||
data: mapData || [],
|
||||
},
|
||||
]
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(echartOption)
|
||||
this.mapEcharts.on('georoam', function (params) {
|
||||
|
|
@ -545,7 +559,6 @@ export default {
|
|||
option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
|
||||
} else {
|
||||
option.geo[0].label.show = false //下层的geo的中心位置随着上层geo一起改变
|
||||
|
||||
}
|
||||
that.mapEcharts.setOption(option) //设置option
|
||||
})
|
||||
|
|
@ -554,7 +567,7 @@ export default {
|
|||
if (params.seriesType === 'scatter' && !params.name) {
|
||||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
// 点击变黄
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
if (params.data.areaName != item.areaName) {
|
||||
if (item.isActive) {
|
||||
item.isActive = false
|
||||
|
|
@ -572,7 +585,7 @@ export default {
|
|||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
|
||||
domtooltipGB.onclick = () => {
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
|
||||
|
|
@ -585,7 +598,7 @@ export default {
|
|||
}
|
||||
} else {
|
||||
let option = that.mapEcharts.getOption() //获得option对象
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
let dom2 = document.getElementsByClassName('iconMap')
|
||||
|
|
@ -593,7 +606,7 @@ export default {
|
|||
that.mapEcharts.setOption(option)
|
||||
}
|
||||
})
|
||||
let set = event => {
|
||||
let set = (event) => {
|
||||
this.pointAll.forEach((v, i) => {
|
||||
if (v.areaName != event.data.areaName) {
|
||||
if (v.isActive) {
|
||||
|
|
@ -637,29 +650,29 @@ export default {
|
|||
borderWidth: 1, //地图边框宽度
|
||||
shadowColor: 'none',
|
||||
shadowBlur: 10,
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
// 设置扇形的阴影
|
||||
},
|
||||
emphasis: {
|
||||
//选中省份的颜色
|
||||
areaColor: '#765af3',
|
||||
label: { show: false }
|
||||
}
|
||||
label: { show: false },
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
color: 'rgba(255,255,255,0.5)'
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
areaColor: '#0a183d',
|
||||
color: '#fff'
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
regions: splitList2
|
||||
regions: splitList2,
|
||||
},
|
||||
{
|
||||
map: 'hs',
|
||||
|
|
@ -674,15 +687,15 @@ export default {
|
|||
borderColor: '#6e55dc',
|
||||
borderWidth: 1,
|
||||
opacity: 0.5,
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
},
|
||||
zlevel: -1,
|
||||
silent: true,
|
||||
tooltip: {
|
||||
show: false,
|
||||
trigger: 'item'
|
||||
}
|
||||
}
|
||||
trigger: 'item',
|
||||
},
|
||||
},
|
||||
],
|
||||
visualMap: {
|
||||
show: false,
|
||||
|
|
@ -692,8 +705,8 @@ export default {
|
|||
seriesIndex: 0,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
|
||||
}
|
||||
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'],
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
|
@ -707,7 +720,7 @@ export default {
|
|||
formatter: function (params) {
|
||||
if (params.data.areaName) {
|
||||
let companyHtml = ''
|
||||
that.companyAreaList.forEach(item => {
|
||||
that.companyAreaList.forEach((item) => {
|
||||
if (item.areaId == params.data.areaId) {
|
||||
companyHtml +=
|
||||
'<div class="itemColor1 itemColor" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
|
||||
|
|
@ -737,8 +750,8 @@ export default {
|
|||
position: 'right',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontWeight: 'bolder'
|
||||
}
|
||||
fontWeight: 'bolder',
|
||||
},
|
||||
},
|
||||
|
||||
series: [
|
||||
|
|
@ -765,17 +778,17 @@ export default {
|
|||
padding: [0, 0, -15, 0],
|
||||
formatter: function (params) {
|
||||
return params.data.count
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
data: this.pointArea || []
|
||||
}
|
||||
]
|
||||
data: this.pointArea || [],
|
||||
},
|
||||
],
|
||||
}
|
||||
this.mapEcharts2.setOption(echartOption2)
|
||||
|
||||
|
|
@ -796,7 +809,7 @@ export default {
|
|||
if (params.seriesType === 'scatter' && !params.name) {
|
||||
let option = that.mapEcharts2.getOption() //获得option对象
|
||||
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
if (params.data.areaName != item.areaName) {
|
||||
if (item.isActive) {
|
||||
item.isActive = false
|
||||
|
|
@ -811,7 +824,7 @@ export default {
|
|||
if (domtooltipGB2) {
|
||||
domtooltipGB2.onclick = () => {
|
||||
let dom2 = document.getElementsByClassName('iconMap')
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
dom2[0].style.display = 'none'
|
||||
|
|
@ -821,7 +834,7 @@ export default {
|
|||
}
|
||||
} else {
|
||||
let option = that.mapEcharts2.getOption() //获得option对象
|
||||
option.series[0].data.forEach(item => {
|
||||
option.series[0].data.forEach((item) => {
|
||||
item.isActive = false
|
||||
})
|
||||
let dom2 = document.getElementsByClassName('iconMap')
|
||||
|
|
@ -830,7 +843,7 @@ export default {
|
|||
}
|
||||
})
|
||||
|
||||
let set2 = event => {
|
||||
let set2 = (event) => {
|
||||
this.pointArea.forEach((v, i) => {
|
||||
if (v.areaName != event.data.areaName) {
|
||||
if (v.isActive) {
|
||||
|
|
@ -841,8 +854,8 @@ export default {
|
|||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
125303
src/untils/china.json
125303
src/untils/china.json
File diff suppressed because it is too large
Load Diff
|
|
@ -10,7 +10,6 @@
|
|||
<LeftTwo></LeftTwo>
|
||||
<!-- <LeftThree></LeftThree> -->
|
||||
<LeftFour></LeftFour>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 中间3D效果展示 -->
|
||||
|
|
@ -96,10 +95,13 @@ import rightThree from '../../components/home/rightThree.vue'
|
|||
import RightFour from '../../components/home/rightFour.vue'
|
||||
import CenterBottom from '../../components/home/centerBottom.vue'
|
||||
import CenterTop from '../../components/home/centerTop.vue'
|
||||
import Center3DMap from '../../components/home/Center3DMap.vue'
|
||||
import CountryMap from '../../components/home/countryMap.vue'
|
||||
// import Center3DMap from '../../components/home/Center3DMap.vue'
|
||||
import Center3DMap from '../../components/home/center3DMap_new.vue'
|
||||
// import Center3DMap from '../../components/home/center3DMap_new.vue'
|
||||
// import CountryMap from '../../components/home/countryMap.vue'
|
||||
import CountryMap from '../../components/home/countryMap1.vue'
|
||||
import CenterFold from '../../components/home/centerFold.vue'
|
||||
import { getMaintenanceWarningApi } from "../../api/screen";
|
||||
import { getMaintenanceWarningApi } from '../../api/screen'
|
||||
export default {
|
||||
components: {
|
||||
LeftOne,
|
||||
|
|
@ -114,7 +116,7 @@ export default {
|
|||
Center3DMap,
|
||||
CenterTop,
|
||||
CountryMap,
|
||||
CenterFold
|
||||
CenterFold,
|
||||
},
|
||||
name: 'Home',
|
||||
data() {
|
||||
|
|
@ -124,7 +126,7 @@ export default {
|
|||
weatherUrl: '',
|
||||
maType: 1,
|
||||
// 您有一条检修预警提示，请注意查收！
|
||||
transformList: []
|
||||
transformList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -153,10 +155,9 @@ export default {
|
|||
// })
|
||||
// this.getWeather()
|
||||
this.getMapSelect(this.maType)
|
||||
getMaintenanceWarningApi().then(res => {
|
||||
getMaintenanceWarningApi().then((res) => {
|
||||
this.transformList = res.data
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
routerClick() {
|
||||
|
|
@ -190,7 +191,15 @@ export default {
|
|||
const year = date.getFullYear()
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||||
const weekdays = [
|
||||
'星期日',
|
||||
'星期一',
|
||||
'星期二',
|
||||
'星期三',
|
||||
'星期四',
|
||||
'星期五',
|
||||
'星期六',
|
||||
]
|
||||
const weekday = weekdays[date.getDay()]
|
||||
const hours = date.getHours().toString().padStart(2, '0')
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0')
|
||||
|
|
@ -198,11 +207,11 @@ export default {
|
|||
const dateTimeString = `${year}/${month}/${day} ${weekday} ${hours}:${minutes}:${seconds}`
|
||||
this.dateTimeString = dateTimeString
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
<style lang="less" scoped>
|
||||
.homePage {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
|
|
|
|||
|
|
@ -7,22 +7,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ScaleBox from "@/components/scaleBox.vue";
|
||||
import ScaleBox from '@/components/scaleBox.vue'
|
||||
export default {
|
||||
name: 'layout',
|
||||
components: { ScaleBox },
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.$route)
|
||||
localStorage.setItem('token', this.$route.query.token)
|
||||
// localStorage.setItem('token', this.$route.query.token)
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue