bonus
/
cqscreen-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码调试

This commit is contained in:
BianLzhaoMin 2024-11-29 18:41:26 +08:00
parent 946c4f0451
commit 6b9242bceb
12 changed files with 27595 additions and 100604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/index.js
View File

@ -19,7 +19,7 @@ var proxyUrl = (module.exports = {
proxyTable: { proxyTable: {
'/screen': { '/screen': {
// target: 'http://112.29.103.165:21626',//重庆 // 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', // target: 'http://10.40.92.74:8080',
changeOrigin: true, changeOrigin: true,
// secure: true, //如果是https接口，需要配置这个参数 // secure: true, //如果是https接口，需要配置这个参数

87
src/App.vue
View File

@ -9,12 +9,25 @@ export default {
created() { created() {
// console.log(this.$route) // console.log(this.$route)
// localStorage.setItem('token', this.$route.query.token) // localStorage.setItem('token', this.$route.query.token)
var link = document.querySelector("link[rel*='icon']") || document.createElement("link"); var link =
link.type = "image/x-icon"; document.querySelector("link[rel*='icon']") ||
link.rel = "shortcut icon"; document.createElement('link')
link.href = require('./assets/img/myImage/logo.png'); link.type = 'image/x-icon'
document.getElementsByTagName("head")[0].appendChild(link); 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> </script>
@ -22,7 +35,7 @@ export default {
.el-dialog { .el-dialog {
// 背景色透明 // 背景色透明
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
// background-color: transparent; // background-color: transparent;
// background-color: #000; // background-color: #000;
background-image: url('./assets/img/dialog/window.png'); background-image: url('./assets/img/dialog/window.png');
background-size: 100% 100%; background-size: 100% 100%;
@ -43,76 +56,78 @@ export default {
.el-table th { .el-table th {
// #253855 #30619B 背景色从上到下渐变 // #253855 #30619B 背景色从上到下渐变
background: linear-gradient(to bottom, #2B313D, #3267A7); background: linear-gradient(to bottom, #2b313d, #3267a7);
color: #fff; color: #fff;
border-bottom: 1px solid #84FCFD !important; border-bottom: 1px solid #84fcfd !important;
} }
.el-table tr { .el-table tr {
background-color: #335684; background-color: #335684;
color: #fff; color: #fff;
} }
.el-table--striped .el-table__body tr.el-table__row--striped td { .el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #25447D; background-color: #25447d;
color: #fff; color: #fff;
} }
.el-table td,.building-top .el-table th.is-leaf { .el-table td,
border-bottom: 1px solid #6983A5; .building-top .el-table th.is-leaf {
border-bottom: 1px solid #6983a5;
} }
.el-table::before{ .el-table::before {
border-bottom: 1px solid #6983A5; border-bottom: 1px solid #6983a5;
background-color: #6983A5; background-color: #6983a5;
height: 1px; height: 1px;
} }
.el-table--enable-row-hover .el-table__body tr:hover>td { .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #6983A5; background-color: #6983a5;
} }
.el-pagination__total { .el-pagination__total {
color: #E1E3E6; color: #e1e3e6;
} }
.el-pagination__jump { .el-pagination__jump {
color: #E1E3E6; color: #e1e3e6;
} }
.el-input__inner { .el-input__inner {
background-color: transparent; background-color: transparent;
border: 1px solid #77E2E7; border: 1px solid #77e2e7;
color: #E1E3E6; color: #e1e3e6;
} }
.el-pagination__sizes .el-input .el-input__inner { .el-pagination__sizes .el-input .el-input__inner {
color: #E3E4E7; color: #e3e4e7;
border: 1px solid #E3E4E7; border: 1px solid #e3e4e7;
} }
.el-pagination__editor.el-input .el-input__inner { .el-pagination__editor.el-input .el-input__inner {
color: #E3E4E7; color: #e3e4e7;
border: 1px solid #E3E4E7; border: 1px solid #e3e4e7;
} }
.el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li { .el-pagination.is-background .btn-prev,
color: #E3E4E7; .el-pagination.is-background .el-pager li {
border: 1px solid #E3E4E7; color: #e3e4e7;
border: 1px solid #e3e4e7;
background-color: transparent; background-color: transparent;
} }
.el-pagination.is-background .btn-next { .el-pagination.is-background .btn-next {
color: #E3E4E7; color: #e3e4e7;
border: 1px solid #E3E4E7; border: 1px solid #e3e4e7;
background-color: transparent; background-color: transparent;
} }
.el-pagination.is-background .el-pager li:not(.disabled).active { .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #98F4FB; background-color: #98f4fb;
color: #000; color: #000;
} }
.el-button--primary { .el-button--primary {
background-color: #84FCFD; background-color: #84fcfd;
border: #84FCFD; border: #84fcfd;
color: #285050; color: #285050;
} }
.el-button--default { .el-button--default {
background-color: transparent; background-color: transparent;
border: 1px solid #84FCFD; border: 1px solid #84fcfd;
color: #D5D6DA; color: #d5d6da;
} }
.el-table__empty-block { .el-table__empty-block {
background-color: #335684; background-color: #335684;
.el-table__empty-text { .el-table__empty-text {
color: #D5D6DA; color: #d5d6da;
} }
} }
} }

2
src/api/dialog.js
View File

@ -3,7 +3,7 @@ import { POST, GET } from './index.js'
const URL_TYPE_LIST = '/material/returnOfMaterialsInfo/getTypeList' const URL_TYPE_LIST = '/material/returnOfMaterialsInfo/getTypeList'
const URL_DETAILS = '/material/base/largeScreen/home/getMaterialReqData/details' const URL_DETAILS = '/material/base/largeScreen/home/getMaterialReqData/details'
const URL_RETURN_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_UNIT_LIST = '/material/agreementInfo/getUnitList'
const URL_PROJECT_LIST = '/material/agreementInfo/getProjectList' const URL_PROJECT_LIST = '/material/agreementInfo/getProjectList'
const URL_SCRAP_ANALYSIS = const URL_SCRAP_ANALYSIS =

3
src/api/index.js
View File

@ -6,7 +6,8 @@ axios.defaults.timeout = 30000
// 默认配置 // 默认配置
// axios.defaults.baseURL = process.env.API_ROOT; // 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( axios.interceptors.request.use(
(config) => { (config) => {

1
src/api/screen.js
View File

@ -48,3 +48,4 @@ export const getMaintenanceWarningApi = (params) =>
//各公司机具保有量 //各公司机具保有量
export const getTotalOwnershipByCompany = (params) => export const getTotalOwnershipByCompany = (params) =>
POST(`/material/base/largeScreen/home/getTotalOwnershipByCompany`) POST(`/material/base/largeScreen/home/getTotalOwnershipByCompany`)
//各公司机具保有量

894
src/components/home/center3DMap.vue
View File

@ -1,471 +1,467 @@
<template> <template>
<div class="centerTopPage"> <div class="centerTopPage">
<div class="mapBox"> <div class="mapBox">
<div id="mapEcharts"></div> <div id="mapEcharts"></div>
</div>
</div> </div>
</template> </div>
</template>
<script>
import * as echarts from 'echarts' <script>
let mapChinaJson = require('@/untils/china.json') import * as echarts from 'echarts'
let ningxiaJson = require('@/untils/ningxia.json') let mapChinaJson = require('@/untils/china.json')
import { getEquipmentDisByMapApi } from "../../api/screen"; let ningxiaJson = require('@/untils/ningxia.json')
import { getEquipmentDisByMapApi } from '../../api/screen'
export default {
name: 'centerTopPage', export default {
data() { name: 'centerTopPage',
return { data() {
type: 1, return {
zoom: 1.39, type: 1,
zoom2: 1.2, zoom: 1.39,
mapEcharts: null, zoom2: 1.2,
mapEcharts2: null, mapEcharts: null,
mapJson: null, mapEcharts2: null,
pointArea: [], mapJson: null,
pointAll: [], pointArea: [],
companyList: [], pointAll: [],
companyAreaList: [], companyList: [],
isCity: 0, companyAreaList: [],
cityCount: [], isCity: 0,
gozoom: 1 cityCount: [],
} gozoom: 1,
}, }
created() { },
// this.getCompanyList() created() {
// this.getCompanyAreaList() // this.getCompanyList()
// this.getCityCount() // this.getCompanyAreaList()
}, // this.getCityCount()
mounted() { },
mounted() {
// this.getEquipmentDisByMapApiPage() // this.getEquipmentDisByMapApiPage()
this.getInitData() this.getInitData()
},
methods: {
getEquipmentDisByMapApiPage() {
getEquipmentDisByMapApi().then((res) => {
console.log('res=====', res)
})
}, },
methods: { getCompanyList() {
getEquipmentDisByMapApiPage() { let params = {
getEquipmentDisByMapApi().then(res => { provinceId: '',
console.log('res=====', res); }
}) getCompanyListByProvinceId(params).then((res) => {
}, if (res.success && res.data) {
getCompanyList() { this.companyList = res.data
let params = {
provinceId: ''
} }
getCompanyListByProvinceId(params).then(res => { })
if (res.success && res.data) { },
this.companyList = res.data getCompanyAreaList() {
} let params = {
}) areaId: '',
}, }
getCompanyAreaList() { getCompanyListByAreaId(params).then((res) => {
let params = { if (res.success && res.data) {
areaId: '' 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() { series: [
this.mapEcharts = echarts.init(document.getElementById('mapEcharts')) {
this.mapJson = mapChinaJson name: 'MAP',
echarts.registerMap('china', this.mapJson) type: 'map3D',
this.setMapOption('china') map: name,
// this.setMapOption2() zlevel: -10,
}, boxWidth: 150,
setMapOption(name) { boxHeight: 60,
var option = { boxDepth: 90, //地图倾斜度
backgroundColor: 'rgba(0,0,0,0)', regionHeight: 5, //地图厚度
label: {
series: [ show: true, //是否显示市
{ textStyle: {
name: 'MAP', color: '#fff', //文字颜色
type: 'map3D', fontSize: 14, //文字大小
map: name, // fontFamily: '微软雅黑',
zlevel: -10, backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
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'
},
}, },
], //三维视觉属性
}; itemStyle: {
this.mapEcharts.setOption(option); opacity: 1,
}, color: 'rgba(35, 72, 174,0.5)', //地图颜色
setMapOption2(){ borderWidth: 1.5,
var option = { borderColor: 'rgb(125, 239, 250)',
geo: [ },
{ // 鼠标hover高亮
type: 'map', emphasis: {
map: 'china', label: {
zlevel: 0, show: true, //是否显示标签
zoom: 1, textStyle: {
aspectScale: 0.96, color: '#fff', //高亮文字颜色
layoutCenter: ['50%', '50.2%'], fontSize: 16,
layoutSize: '150%', fontFamily: '微软雅黑',
roam: false,
silent: true,
itemStyle: {
normal: {
borderColor: '#7BE7FC',
shadowColor: '#244AAF',
borderWidth: 2,
shadowOffsetY: 0,
shadowBlur: 50,
areaColor: '#458FD6',
},
},
}, },
{ },
type: 'map', itemStyle: {
map: 'china', areaColor: '#7BE7FC',
zlevel: -1, borderColor: '#7BE7FC',
zoom: 1, borderWidth: 3,
aspectScale: 0.96, },
layoutCenter: ['50%', '51.4%'], },
layoutSize: '150%', shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
roam: false, // 'color' 只显示颜色，不受光照等其它因素的影响。
silent: true, // 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
itemStyle: { // 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
normal: { // realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
borderColor: 'rgba(44, 89, 199,1)', // lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
shadowColor: 'rgba(195,26,59,0.5)', // colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。
shadowOffsetY: 0, light: {
shadowBlur: 25, // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
areaColor: 'rgba(44, 89, 199,0.1)', main: {
}, // 场景主光源的设置，在 globe 组件中就是太阳光。
}, color: '#fff', // 主光源的颜色。[ default: #fff ]
}, intensity: 1.2, // 主光源的强度。[ default: 1 ]
{ shadow: false, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
type: 'map', // shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
map: 'china', alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
zlevel: -2, beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
zoom: 1, },
aspectScale: 0.96, ambient: {
layoutCenter: ['50%', '52.8%'], // 全局的环境光设置。
layoutSize: '150%', color: '#fff', // 环境光的颜色。[ default: #fff ]
roam: false, intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
silent: true, },
itemStyle: { },
normal: { groundplane: {
borderColor: 'rgba(123, 231, 252,1)', show: false,
shadowColor: 'rgba(195,26,59,0.5)', },
shadowOffsetY: 0, viewControl: {
shadowBlur: 20, //distance: 150,// 地图视角 控制初始大小
areaColor: 'rgba(5,21,35,0.1)', //rotateSensitivity: 1,// 旋转
}, //zoomSensitivity: 1,// 缩放
}, projection: 'perspective',
}, autoRotate: false,
{ damping: 0,
type: 'map', rotateSensitivity: 2, //旋转操作的灵敏度
map: 'china', rotateMouseButton: 'left', //旋转操作使用的鼠标按键
zlevel: -3, zoomSensitivity: 2, //缩放操作的灵敏度
zoom: 1, panSensitivity: 2, //平移操作的灵敏度
aspectScale: 0.96, panMouseButton: 'right', //平移操作使用的鼠标按键
layoutCenter: ['50%', '54.2%'], distance: 40, //默认视角距离主体的距离
layoutSize: '150%', minDistance: 100,
roam: false, maxDistance: 170,
silent: true, minAlpha: 30,
itemStyle: { maxAlpha: 80,
normal: { minBeta: -25,
borderColor: 'rgba(123, 231, 252,1)', maxBeta: 45,
shadowColor: 'rgba(195,26,59,0.8)', center: [0, 0, 0],
shadowOffsetY: 0, animation: true,
shadowBlur: 15, animationDurationUpdate: 1000,
areaColor: 'rgba(5,21,35,0.1)', animationEasingUpdate: 'cubicInOut',
}, },
}, },
}, ],
],
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);
} }
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> .buttonTop {
<style lang="less" scoped>
.centerTopPage {
width: 100%; width: 100%;
height: 627px; display: flex;
// background:palegoldenrod; justify-content: flex-start;
margin-bottom: 2%; }
padding: 0 10px; .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; position: relative;
box-sizing: border-box; #mapEcharts {
.iconMap {
display: block !important;
visibility: visible !important;
opacity: 1;
}
.buttonTop {
width: 100%; width: 100%;
display: flex; height: 100%;
justify-content: flex-start;
} }
.buttom1 { #mapEcharts2 {
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%; width: 100%;
height: 97%; height: 100%;
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;
}
} }
z-index: 1000;
} }
</style> .label-box {
<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; position: absolute;
top: 6px; bottom: 0px;
left: 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; </style>
}
.itemColor2:before { <style>
background: #2df0fe; .scrollTooltip::-webkit-scrollbar {
} width: 10px;
.itemColor3:before { height: 10px;
background: #10e0a5; }
} .scrollTooltip::-webkit-scrollbar-thumb {
.itemColor4:before { background-color: #1653a6;
background: #dcef4e; border-radius: 10px;
} -webkit-box-shadow: inset 1px 1px 0 #1653a6;
.itemColor5:before { }
background: #f48413; .itemColor {
} position: relative;
.itemColor6:before { padding-left: 15px;
background: #fc5403; line-height: 22px;
} }
</style> .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>

467
src/components/home/center3DMap_new.vue Normal file
View File

@ -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>

259
src/components/home/countryMap.vue
View File

@ -27,7 +27,7 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
let mapChinaJson = require('@/untils/china.json') let mapChinaJson = require('@/untils/china.json')
let ningxiaJson = require('@/untils/ningxia.json') let ningxiaJson = require('@/untils/ningxia.json')
import { getEquipmentDisByMapApi } from "../../api/screen"; import { getEquipmentDisByMapApi } from '../../api/screen'
export default { export default {
name: 'centerTopPage', name: 'centerTopPage',
@ -45,7 +45,7 @@ export default {
companyAreaList: [], companyAreaList: [],
isCity: 0, isCity: 0,
cityCount: [], cityCount: [],
gozoom: 1 gozoom: 1,
} }
}, },
created() { created() {
@ -54,21 +54,20 @@ export default {
// this.getCityCount() // this.getCityCount()
}, },
mounted() { mounted() {
this.getEquipmentDisByMapApiPage() this.getEquipmentDisByMapApiPage()
this.getInitData() this.getInitData()
}, },
methods: { methods: {
getEquipmentDisByMapApiPage() { getEquipmentDisByMapApiPage() {
getEquipmentDisByMapApi().then(res => { getEquipmentDisByMapApi().then((res) => {
console.log('res=====', res); console.log('res=====', res)
}) })
}, },
getCompanyList() { getCompanyList() {
let params = { let params = {
provinceId: '' provinceId: '',
} }
getCompanyListByProvinceId(params).then(res => { getCompanyListByProvinceId(params).then((res) => {
if (res.success && res.data) { if (res.success && res.data) {
this.companyList = res.data this.companyList = res.data
} }
@ -76,9 +75,9 @@ export default {
}, },
getCompanyAreaList() { getCompanyAreaList() {
let params = { let params = {
areaId: '' areaId: '',
} }
getCompanyListByAreaId(params).then(res => { getCompanyListByAreaId(params).then((res) => {
if (res.success && res.data) { if (res.success && res.data) {
this.companyAreaList = res.data this.companyAreaList = res.data
} }
@ -162,33 +161,40 @@ export default {
}, },
setMapOption() { setMapOption() {
//获取当前显示地图下方地市的坐标点数据； 用于气泡显示 //获取当前显示地图下方地市的坐标点数据； 用于气泡显示
let geoCoordMap = {}; let geoCoordMap = {}
// 获取地区详细信息 // 获取地区详细信息
let mapFeatures = this.mapJson.features; let mapFeatures = this.mapJson.features
// 遍历获取每个地区的经纬度 // 遍历获取每个地区的经纬度
mapFeatures.forEach(function (v, i) { mapFeatures.forEach(function (v, i) {
// 获取当前地区名 // 获取当前地区名
let name = v.properties.name; let name = v.properties.name
if (name) { if (name) {
// 获取当前地区的经纬度 // 获取当前地区的经纬度
geoCoordMap[name] = v.properties.center; geoCoordMap[name] = v.properties.center
} }
}); })
let mapData = [{ let mapData = [
name: "青海省", {
value: ['101.778', '36.623'], a: '100' name: '青海省',
}, value: ['101.778', '36.623'],
{ a: '100',
name: "宁夏回族自治区", },
value: ['106.278', '38.466'], a: '100' {
}, name: '宁夏回族自治区',
{ value: ['106.278', '38.466'],
name: '安徽省', value: ['117.283', '31.861'], a: '100' a: '100',
}, },
{ {
name: '湖南省', value: ['112.982', '28.194'], a: '100' name: '安徽省',
} value: ['117.283', '31.861'],
a: '100',
},
{
name: '湖南省',
value: ['112.982', '28.194'],
a: '100',
},
] ]
let that = this let that = this
this.pointAll = this.cityCount this.pointAll = this.cityCount
@ -198,143 +204,143 @@ export default {
itemStyle: { itemStyle: {
areaColor: '#F50508', areaColor: '#F50508',
borderColor: '#1773c3', // 区域边框 borderColor: '#1773c3', // 区域边框
shadowColor: '#1773c3' // 阴影 shadowColor: '#1773c3', // 阴影
} },
}) })
let splitList = [ let splitList = [
{ name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } }, { name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
{ {
name: '天津市', name: '天津市',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '上海市', name: '上海市',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '重庆市', name: '重庆市',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '河北省', name: '河北省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '河南省', name: '河南省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '云南省', name: '云南省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '辽宁省', name: '辽宁省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '黑龙江省', name: '黑龙江省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '湖南省', name: '湖南省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '安徽省', name: '安徽省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '山东省', name: '山东省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '新疆维吾尔自治区', name: '新疆维吾尔自治区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '江苏省', name: '江苏省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '浙江省', name: '浙江省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '江西省', name: '江西省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '湖北省', name: '湖北省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '广西壮族自治区', name: '广西壮族自治区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '甘肃省', name: '甘肃省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '山西省', name: '山西省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '内蒙古自治区', name: '内蒙古自治区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '陕西省', name: '陕西省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '吉林省', name: '吉林省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '福建省', name: '福建省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '贵州省', name: '贵州省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '广东省', name: '广东省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '青海省', name: '青海省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '西藏自治区', name: '西藏自治区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '四川省', name: '四川省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '宁夏回族自治区', name: '宁夏回族自治区',
itemStyle: { normal: { areaColor: '#2187FF' } } itemStyle: { normal: { areaColor: '#2187FF' } },
}, },
{ {
name: '海南省', name: '海南省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '台湾省', name: '台湾省',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '香港特别行政区', name: '香港特别行政区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
}, },
{ {
name: '澳门特别行政区', name: '澳门特别行政区',
itemStyle: { normal: { areaColor: '#0A2B7B' } } itemStyle: { normal: { areaColor: '#0A2B7B' } },
} },
] ]
let imgUrl = require('../../assets/img/myImage/tankuang.png') let imgUrl = require('../../assets/img/myImage/tankuang.png')
let echartOption = { let echartOption = {
@ -357,32 +363,32 @@ export default {
borderWidth: 1, //地图边框宽度 borderWidth: 1, //地图边框宽度
shadowColor: 'none', shadowColor: 'none',
shadowBlur: 10, shadowBlur: 10,
color: '#fff' color: '#fff',
// 设置扇形的阴影 // 设置扇形的阴影
}, },
emphasis: { emphasis: {
//选中省份的颜色 //选中省份的颜色
areaColor: '#765af3', areaColor: '#765af3',
label: { label: {
show: true show: true,
} },
} },
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 500, fontWeight: 500,
color: 'rgba(255,255,255,0.5)' color: 'rgba(255,255,255,0.5)',
}, },
emphasis: { emphasis: {
show: true, show: true,
areaColor: '#0a183d', areaColor: '#0a183d',
color: '#fff' color: '#fff',
} },
}, },
zlevel: 1, zlevel: 1,
regions: splitList regions: splitList,
}, },
{ {
map: 'china', map: 'china',
@ -397,15 +403,15 @@ export default {
borderColor: '#6e55dc', borderColor: '#6e55dc',
borderWidth: 1, borderWidth: 1,
opacity: 0.5, opacity: 0.5,
color: '#fff' color: '#fff',
}, },
zlevel: -1, zlevel: -1,
silent: true, silent: true,
tooltip: { tooltip: {
show: false, show: false,
trigger: 'item' trigger: 'item',
} },
} },
], ],
visualMap: { visualMap: {
show: false, show: false,
@ -415,7 +421,7 @@ export default {
seriesIndex: 0, seriesIndex: 0,
calculable: true, calculable: true,
inRange: { inRange: {
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'] color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'],
}, },
}, },
tooltip: { tooltip: {
@ -474,8 +480,8 @@ export default {
position: 'right', position: 'right',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontWeight: 'bolder' fontWeight: 'bolder',
} },
}, },
series: [ series: [
{ {
@ -487,16 +493,24 @@ export default {
symbolSize: [45, 55], symbolSize: [45, 55],
symbol: (value, params) => { symbol: (value, params) => {
if (params.name == '安徽省') { if (params.name == '安徽省') {
return 'image://' + require('@/assets/img/myImage/markPoints.png') return (
'image://' + require('@/assets/img/myImage/markPoints.png')
)
} }
if (params.name == '湖南省') { if (params.name == '湖南省') {
return 'image://' + require('@/assets/img/myImage/markPoints.png') return (
'image://' + require('@/assets/img/myImage/markPoints.png')
)
} }
if (params.name == '宁夏回族自治区') { if (params.name == '宁夏回族自治区') {
return 'image://' + require('@/assets/img/myImage/markPoints.png') return (
'image://' + require('@/assets/img/myImage/markPoints.png')
)
} }
if (params.name == '青海省') { if (params.name == '青海省') {
return 'image://' + require('@/assets/img/myImage/markPoints.png') return (
'image://' + require('@/assets/img/myImage/markPoints.png')
)
} }
}, },
emphasis: { emphasis: {
@ -514,17 +528,17 @@ export default {
padding: [0, 0, -15, 0], padding: [0, 0, -15, 0],
formatter: function (params) { formatter: function (params) {
return params.data.count return params.data.count
} },
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#fff' color: '#fff',
} },
}, },
data: mapData || [] data: mapData || [],
}, },
] ],
} }
this.mapEcharts.setOption(echartOption) this.mapEcharts.setOption(echartOption)
this.mapEcharts.on('georoam', function (params) { this.mapEcharts.on('georoam', function (params) {
@ -545,7 +559,6 @@ export default {
option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变 option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
} else { } else {
option.geo[0].label.show = false //下层的geo的中心位置随着上层geo一起改变 option.geo[0].label.show = false //下层的geo的中心位置随着上层geo一起改变
} }
that.mapEcharts.setOption(option) //设置option that.mapEcharts.setOption(option) //设置option
}) })
@ -554,7 +567,7 @@ export default {
if (params.seriesType === 'scatter' && !params.name) { if (params.seriesType === 'scatter' && !params.name) {
let option = that.mapEcharts.getOption() //获得option对象 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 (params.data.areaName != item.areaName) {
if (item.isActive) { if (item.isActive) {
item.isActive = false item.isActive = false
@ -572,7 +585,7 @@ export default {
let option = that.mapEcharts.getOption() //获得option对象 let option = that.mapEcharts.getOption() //获得option对象
domtooltipGB.onclick = () => { domtooltipGB.onclick = () => {
option.series[0].data.forEach(item => { option.series[0].data.forEach((item) => {
item.isActive = false item.isActive = false
}) })
@ -585,7 +598,7 @@ export default {
} }
} else { } else {
let option = that.mapEcharts.getOption() //获得option对象 let option = that.mapEcharts.getOption() //获得option对象
option.series[0].data.forEach(item => { option.series[0].data.forEach((item) => {
item.isActive = false item.isActive = false
}) })
let dom2 = document.getElementsByClassName('iconMap') let dom2 = document.getElementsByClassName('iconMap')
@ -593,7 +606,7 @@ export default {
that.mapEcharts.setOption(option) that.mapEcharts.setOption(option)
} }
}) })
let set = event => { let set = (event) => {
this.pointAll.forEach((v, i) => { this.pointAll.forEach((v, i) => {
if (v.areaName != event.data.areaName) { if (v.areaName != event.data.areaName) {
if (v.isActive) { if (v.isActive) {
@ -637,29 +650,29 @@ export default {
borderWidth: 1, //地图边框宽度 borderWidth: 1, //地图边框宽度
shadowColor: 'none', shadowColor: 'none',
shadowBlur: 10, shadowBlur: 10,
color: '#fff' color: '#fff',
// 设置扇形的阴影 // 设置扇形的阴影
}, },
emphasis: { emphasis: {
//选中省份的颜色 //选中省份的颜色
areaColor: '#765af3', areaColor: '#765af3',
label: { show: false } label: { show: false },
} },
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
fontSize: 14, fontSize: 14,
fontWeight: 500, fontWeight: 500,
color: 'rgba(255,255,255,0.5)' color: 'rgba(255,255,255,0.5)',
}, },
emphasis: { emphasis: {
show: true, show: true,
areaColor: '#0a183d', areaColor: '#0a183d',
color: '#fff' color: '#fff',
} },
}, },
regions: splitList2 regions: splitList2,
}, },
{ {
map: 'hs', map: 'hs',
@ -674,15 +687,15 @@ export default {
borderColor: '#6e55dc', borderColor: '#6e55dc',
borderWidth: 1, borderWidth: 1,
opacity: 0.5, opacity: 0.5,
color: '#fff' color: '#fff',
}, },
zlevel: -1, zlevel: -1,
silent: true, silent: true,
tooltip: { tooltip: {
show: false, show: false,
trigger: 'item' trigger: 'item',
} },
} },
], ],
visualMap: { visualMap: {
show: false, show: false,
@ -692,8 +705,8 @@ export default {
seriesIndex: 0, seriesIndex: 0,
calculable: true, calculable: true,
inRange: { inRange: {
color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'] color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022'],
} },
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -707,7 +720,7 @@ export default {
formatter: function (params) { formatter: function (params) {
if (params.data.areaName) { if (params.data.areaName) {
let companyHtml = '' let companyHtml = ''
that.companyAreaList.forEach(item => { that.companyAreaList.forEach((item) => {
if (item.areaId == params.data.areaId) { if (item.areaId == params.data.areaId) {
companyHtml += companyHtml +=
'<div class="itemColor1 itemColor" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' + '<div class="itemColor1 itemColor" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
@ -737,8 +750,8 @@ export default {
position: 'right', position: 'right',
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontWeight: 'bolder' fontWeight: 'bolder',
} },
}, },
series: [ series: [
@ -765,17 +778,17 @@ export default {
padding: [0, 0, -15, 0], padding: [0, 0, -15, 0],
formatter: function (params) { formatter: function (params) {
return params.data.count return params.data.count
} },
} },
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: '#fff' color: '#fff',
} },
}, },
data: this.pointArea || [] data: this.pointArea || [],
} },
] ],
} }
this.mapEcharts2.setOption(echartOption2) this.mapEcharts2.setOption(echartOption2)
@ -796,7 +809,7 @@ export default {
if (params.seriesType === 'scatter' && !params.name) { if (params.seriesType === 'scatter' && !params.name) {
let option = that.mapEcharts2.getOption() //获得option对象 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 (params.data.areaName != item.areaName) {
if (item.isActive) { if (item.isActive) {
item.isActive = false item.isActive = false
@ -811,7 +824,7 @@ export default {
if (domtooltipGB2) { if (domtooltipGB2) {
domtooltipGB2.onclick = () => { domtooltipGB2.onclick = () => {
let dom2 = document.getElementsByClassName('iconMap') let dom2 = document.getElementsByClassName('iconMap')
option.series[0].data.forEach(item => { option.series[0].data.forEach((item) => {
item.isActive = false item.isActive = false
}) })
dom2[0].style.display = 'none' dom2[0].style.display = 'none'
@ -821,7 +834,7 @@ export default {
} }
} else { } else {
let option = that.mapEcharts2.getOption() //获得option对象 let option = that.mapEcharts2.getOption() //获得option对象
option.series[0].data.forEach(item => { option.series[0].data.forEach((item) => {
item.isActive = false item.isActive = false
}) })
let dom2 = document.getElementsByClassName('iconMap') let dom2 = document.getElementsByClassName('iconMap')
@ -830,7 +843,7 @@ export default {
} }
}) })
let set2 = event => { let set2 = (event) => {
this.pointArea.forEach((v, i) => { this.pointArea.forEach((v, i) => {
if (v.areaName != event.data.areaName) { if (v.areaName != event.data.areaName) {
if (v.isActive) { if (v.isActive) {
@ -841,8 +854,8 @@ export default {
} }
}) })
} }
} },
} },
} }
</script> </script>

1138
src/components/home/countryMap1.vue Normal file
View File

File diff suppressed because it is too large Load Diff

125303
src/untils/china.json
View File

File diff suppressed because it is too large Load Diff

31
src/views/Home/index.vue
View File

@ -10,7 +10,6 @@
<LeftTwo></LeftTwo> <LeftTwo></LeftTwo>
<!-- <LeftThree></LeftThree> --> <!-- <LeftThree></LeftThree> -->
<LeftFour></LeftFour> <LeftFour></LeftFour>
</div> </div>
<!-- 中间3D效果展示 --> <!-- 中间3D效果展示 -->
@ -96,10 +95,13 @@ import rightThree from '../../components/home/rightThree.vue'
import RightFour from '../../components/home/rightFour.vue' import RightFour from '../../components/home/rightFour.vue'
import CenterBottom from '../../components/home/centerBottom.vue' import CenterBottom from '../../components/home/centerBottom.vue'
import CenterTop from '../../components/home/centerTop.vue' import CenterTop from '../../components/home/centerTop.vue'
import Center3DMap from '../../components/home/Center3DMap.vue' // import Center3DMap from '../../components/home/Center3DMap.vue'
import CountryMap from '../../components/home/countryMap.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 CenterFold from '../../components/home/centerFold.vue'
import { getMaintenanceWarningApi } from "../../api/screen"; import { getMaintenanceWarningApi } from '../../api/screen'
export default { export default {
components: { components: {
LeftOne, LeftOne,
@ -114,7 +116,7 @@ export default {
Center3DMap, Center3DMap,
CenterTop, CenterTop,
CountryMap, CountryMap,
CenterFold CenterFold,
}, },
name: 'Home', name: 'Home',
data() { data() {
@ -124,7 +126,7 @@ export default {
weatherUrl: '', weatherUrl: '',
maType: 1, maType: 1,
// 您有一条检修预警提示，请注意查收！ // 您有一条检修预警提示，请注意查收！
transformList: [] transformList: [],
} }
}, },
created() { created() {
@ -153,10 +155,9 @@ export default {
// }) // })
// this.getWeather() // this.getWeather()
this.getMapSelect(this.maType) this.getMapSelect(this.maType)
getMaintenanceWarningApi().then(res => { getMaintenanceWarningApi().then((res) => {
this.transformList = res.data this.transformList = res.data
}) })
}, },
methods: { methods: {
routerClick() { routerClick() {
@ -190,7 +191,15 @@ export default {
const year = date.getFullYear() const year = date.getFullYear()
const month = (date.getMonth() + 1).toString().padStart(2, '0') const month = (date.getMonth() + 1).toString().padStart(2, '0')
const day = date.getDate().toString().padStart(2, '0') const day = date.getDate().toString().padStart(2, '0')
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] const weekdays = [
'星期日',
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六',
]
const weekday = weekdays[date.getDay()] const weekday = weekdays[date.getDay()]
const hours = date.getHours().toString().padStart(2, '0') const hours = date.getHours().toString().padStart(2, '0')
const minutes = date.getMinutes().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}` const dateTimeString = `${year}/${month}/${day} ${weekday} ${hours}:${minutes}:${seconds}`
this.dateTimeString = dateTimeString this.dateTimeString = dateTimeString
}, },
} },
} }
</script> </script>
<style lang='less' scoped> <style lang="less" scoped>
.homePage { .homePage {
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;

12
src/views/layout.vue
View File

@ -7,22 +7,18 @@
</template> </template>
<script> <script>
import ScaleBox from "@/components/scaleBox.vue"; import ScaleBox from '@/components/scaleBox.vue'
export default { export default {
name: 'layout', name: 'layout',
components: { ScaleBox }, components: { ScaleBox },
data() { data() {
return { return {}
}
}, },
mounted() { mounted() {
// console.log(this.$route) // console.log(this.$route)
localStorage.setItem('token', this.$route.query.token) // localStorage.setItem('token', this.$route.query.token)
}, },
methods: { methods: {},
}
} }
</script> </script>