|
|
@@ -12,28 +12,7 @@
|
|
|
<div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
|
|
|
<div class="leixingxianshi">
|
|
|
<div class="viewfilediv">
|
|
|
- <div class="zfx c1"></div>
|
|
|
- <span>新增安装</span>
|
|
|
- </div>
|
|
|
- <div class="viewfilediv">
|
|
|
- <div class="zfx c2"></div>
|
|
|
- <span>安装设备</span>
|
|
|
- </div>
|
|
|
- <div class="viewfilediv">
|
|
|
- <div class="zfx c3"></div>
|
|
|
- <span>新增维修</span>
|
|
|
- </div>
|
|
|
- <div class="viewfilediv">
|
|
|
- <div class="zfx c9"></div>
|
|
|
- <span>新增清洗</span>
|
|
|
- </div>
|
|
|
- <div class="viewfilediv">
|
|
|
- <div class="zfx c4"></div>
|
|
|
- <span>安装未完工</span>
|
|
|
- </div>
|
|
|
- <div class="viewfilediv">
|
|
|
- <div class="zfx c5"></div>
|
|
|
- <span>维修未完工</span>
|
|
|
+ <div class="zfx" style="width:60px; background: linear-gradient(to right, #6ada40,#ebe24a,#d73921);"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,36 +26,36 @@ import zhejiang from './js/zhejiang.js';
|
|
|
import moduleEnclosure from '@/components/moduleEnclosure.vue';
|
|
|
import mapDataStatistics from './mapDataStatistics.vue';
|
|
|
import * as echarts from 'echarts';
|
|
|
-import { bigGetRegion, bigGetLarge9 } from '@/api/common.js';
|
|
|
+import { bigGetRegion, bigGetLarge9, bigGetLarge10 } from '@/api/common.js';
|
|
|
// 计算 GeoJSON 数据的边界框
|
|
|
function calculateBoundingBox(geoJsonData) {
|
|
|
- let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
|
- geoJsonData.features.forEach((feature) => {
|
|
|
- const coordinates = feature.geometry.coordinates;
|
|
|
- const type = feature.geometry.type;
|
|
|
- if (type === 'Polygon') {
|
|
|
- coordinates.forEach((polygon) => {
|
|
|
- polygon.forEach((coord) => {
|
|
|
- minX = Math.min(minX, coord[0]);
|
|
|
- minY = Math.min(minY, coord[1]);
|
|
|
- maxX = Math.max(maxX, coord[0]);
|
|
|
- maxY = Math.max(maxY, coord[1]);
|
|
|
- });
|
|
|
- });
|
|
|
- } else if (type === 'MultiPolygon') {
|
|
|
- coordinates.forEach((multiPolygon) => {
|
|
|
- multiPolygon.forEach((polygon) => {
|
|
|
- polygon.forEach((coord) => {
|
|
|
- minX = Math.min(minX, coord[0]);
|
|
|
- minY = Math.min(minY, coord[1]);
|
|
|
- maxX = Math.max(maxX, coord[0]);
|
|
|
- maxY = Math.max(maxY, coord[1]);
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- return { minX, minY, maxX, maxY };
|
|
|
+ let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|
|
+ geoJsonData.features.forEach((feature) => {
|
|
|
+ const coordinates = feature.geometry.coordinates;
|
|
|
+ const type = feature.geometry.type;
|
|
|
+ if (type === 'Polygon') {
|
|
|
+ coordinates.forEach((polygon) => {
|
|
|
+ polygon.forEach((coord) => {
|
|
|
+ minX = Math.min(minX, coord[0]);
|
|
|
+ minY = Math.min(minY, coord[1]);
|
|
|
+ maxX = Math.max(maxX, coord[0]);
|
|
|
+ maxY = Math.max(maxY, coord[1]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (type === 'MultiPolygon') {
|
|
|
+ coordinates.forEach((multiPolygon) => {
|
|
|
+ multiPolygon.forEach((polygon) => {
|
|
|
+ polygon.forEach((coord) => {
|
|
|
+ minX = Math.min(minX, coord[0]);
|
|
|
+ minY = Math.min(minY, coord[1]);
|
|
|
+ maxX = Math.max(maxX, coord[0]);
|
|
|
+ maxY = Math.max(maxY, coord[1]);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return { minX, minY, maxX, maxY };
|
|
|
}
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -100,164 +79,179 @@ export default {
|
|
|
cIndex: 0,
|
|
|
oldcIndex: 0,
|
|
|
myChart: null,
|
|
|
- getLarge9: []
|
|
|
+ getLarge9: [],
|
|
|
+ getLarge10: []
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getbigGetLarge9();
|
|
|
-
|
|
|
+ computed: {
|
|
|
+ userInfo() {
|
|
|
+ return JSON.parse(localStorage.getItem('greemall_user'))
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ "userInfo.type":{
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ if(this.userInfo){
|
|
|
+ if (this.userInfo.type == 2){
|
|
|
+ this.getbigGetLarge9({ country: 100000 });
|
|
|
+ }else{
|
|
|
+ this.getbigGetLarge10({ province:this.userInfo.province, city: this.userInfo.city });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- getbigGetLarge9(){
|
|
|
- bigGetLarge9().then(res=>{
|
|
|
+ getbigGetLarge9(pam) {
|
|
|
+ bigGetLarge9().then(res => {
|
|
|
this.getLarge9 = res.data
|
|
|
- this.echart_7();
|
|
|
+ this.getLarge10 = []
|
|
|
+ this.echart_7(pam);
|
|
|
})
|
|
|
},
|
|
|
- echart_7(pam={
|
|
|
- country: 100000,
|
|
|
- // province:"广东省",
|
|
|
- // city: "广州市"
|
|
|
- }) {
|
|
|
- var that = this;
|
|
|
- if (that.myChart) {
|
|
|
- that.myChart.dispose();
|
|
|
- }
|
|
|
- bigGetRegion(pam).then(res => {
|
|
|
- // 初始化 ECharts 实例
|
|
|
- that.myChart = echarts.init(document.getElementById('chart_7'));
|
|
|
- const geoJsonData = JSON.parse(res.data);
|
|
|
- // 计算边界框
|
|
|
- const boundingBox = calculateBoundingBox(geoJsonData);
|
|
|
- // 计算中心点
|
|
|
- const center = [
|
|
|
- (boundingBox.minX + boundingBox.maxX) / 2,
|
|
|
- (boundingBox.minY + boundingBox.maxY) / 2
|
|
|
- ];
|
|
|
- echarts.registerMap('china', geoJsonData);
|
|
|
- // 指定城市和颜色
|
|
|
- var cityColors = {};
|
|
|
- this.getLarge9.map(name => {
|
|
|
- cityColors[name] = "#009eff";
|
|
|
- });
|
|
|
- // 构建 series 数据
|
|
|
- var seriesData = Object.keys(cityColors).map(function (city) {
|
|
|
- return {
|
|
|
- name: city,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaColor: cityColors[city],
|
|
|
- borderColor: 'rgba(0,0,0,0)'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- areaColor: cityColors[city],
|
|
|
- borderColor: 'rgba(0,0,0,0)'
|
|
|
- }
|
|
|
+ getbigGetLarge10(pam) {
|
|
|
+ bigGetLarge10(pam).then(res => {
|
|
|
+ this.getLarge9 = []
|
|
|
+ this.getLarge10 = res.data
|
|
|
+ this.echart_7({ province:this.userInfo.province, city: this.userInfo.city });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ echart_7(pam) {
|
|
|
+ var that = this;
|
|
|
+ if (that.myChart) {
|
|
|
+ that.myChart.dispose();
|
|
|
+ }
|
|
|
+ bigGetRegion(pam).then(res => {
|
|
|
+ // 初始化 ECharts 实例
|
|
|
+ that.myChart = echarts.init(document.getElementById('chart_7'));
|
|
|
+ const geoJsonData = JSON.parse(res.data);
|
|
|
+ // 计算边界框
|
|
|
+ const boundingBox = calculateBoundingBox(geoJsonData);
|
|
|
+ // 计算中心点
|
|
|
+ const center = [
|
|
|
+ (boundingBox.minX + boundingBox.maxX) / 2,
|
|
|
+ (boundingBox.minY + boundingBox.maxY) / 2
|
|
|
+ ];
|
|
|
+ echarts.registerMap('china', geoJsonData);
|
|
|
+ // 指定城市和颜色
|
|
|
+ var cityColors = {};
|
|
|
+ this.getLarge9.map(name => {
|
|
|
+ cityColors[name] = "#009eff";
|
|
|
+ });
|
|
|
+ this.getLarge10.map(item => {
|
|
|
+ cityColors[item.area] = item.num<=2 ? "#6ada40" : item.num<=4 ? "#ebe24a" : item.num > 4 ? "#d73921" : "none"
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(this.getLarge9, this.getLarge10, cityColors)
|
|
|
+ // 构建 series 数据
|
|
|
+ var seriesData = Object.keys(cityColors).map(function (city) {
|
|
|
+ return {
|
|
|
+ name: city,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: cityColors[city],
|
|
|
+ borderColor: 'none'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: cityColors[city],
|
|
|
+ borderColor: 'none'
|
|
|
}
|
|
|
- };
|
|
|
- });
|
|
|
- // 配置项
|
|
|
- var option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{b}'
|
|
|
},
|
|
|
- geo: {
|
|
|
- map: 'china',
|
|
|
- roam: true,
|
|
|
- zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
|
|
|
- center: center,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaColor: 'rgba(0,0,0,0)',
|
|
|
- borderColor: '#096DF3'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- areaColor: '#7024fb'
|
|
|
- }
|
|
|
- },
|
|
|
- regions: [
|
|
|
- ...seriesData,
|
|
|
- {
|
|
|
- name: "南海诸岛",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0,
|
|
|
- }
|
|
|
+ };
|
|
|
+ });
|
|
|
+ var mapcon = {
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderColor: 'rgba(0,144,255, 1)',
|
|
|
+ borderWidth: 1,
|
|
|
+ areaColor: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.4,
|
|
|
+ y: 0.5,
|
|
|
+ r: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(0,144,255, 0)', // 0% 处的颜色
|
|
|
},
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,144,255, .1)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(0,144,255, 1)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ globalCoord: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ shadowColor: 'rgba(0,144,255, 1)',
|
|
|
+ shadowOffsetX: -1,
|
|
|
+ shadowOffsetY: 1,
|
|
|
+ shadowBlur: 10,
|
|
|
},
|
|
|
- series: [{
|
|
|
- type: 'map',
|
|
|
- map: 'china',
|
|
|
- geoIndex: 0,
|
|
|
- data: seriesData
|
|
|
- }]
|
|
|
- };
|
|
|
- // 使用配置项生成图表
|
|
|
- that.myChart.setOption(option);
|
|
|
-
|
|
|
- // 监听点击事件
|
|
|
- that.myChart.on('click', function (params) {
|
|
|
- // 更新地区颜色
|
|
|
- var updatedSeriesData = seriesData.map(function (item) {
|
|
|
- if (item.name === params.name) {
|
|
|
- return {
|
|
|
- name: item.name,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaColor: 'red',
|
|
|
- borderColor: 'rgba(0,0,0,0)'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- areaColor: 'none',
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- } else {
|
|
|
- return {
|
|
|
- name: item.name,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- areaColor: cityColors[item.name] || 'rgba(0,0,0,0)',
|
|
|
- borderColor: 'rgba(0,0,0,0)'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- areaColor: 'none',
|
|
|
- }
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#0082ff',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ select: {
|
|
|
+ // 地图选中区域样式
|
|
|
+ label: {
|
|
|
+ // 选中区域的label(文字)样式
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ // 选中区域的默认样式
|
|
|
+ areaColor: '#7024fb',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ animation: false,
|
|
|
+ };
|
|
|
+ // 配置项
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b}'
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: 'china',
|
|
|
+ roam: true,
|
|
|
+ zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
|
|
|
+ center: center,
|
|
|
+ ...mapcon,
|
|
|
+ regions: [
|
|
|
+ ...seriesData,
|
|
|
+ {
|
|
|
+ name: "南海诸岛",
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ opacity: 0,
|
|
|
}
|
|
|
- };
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
- // 更新图表
|
|
|
- that.myChart.setOption({
|
|
|
- geo: {
|
|
|
- regions: [
|
|
|
- ...updatedSeriesData,
|
|
|
- {
|
|
|
- name: "南海诸岛",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- opacity: 0,
|
|
|
- }
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- series: [{
|
|
|
- data: updatedSeriesData
|
|
|
- }]
|
|
|
- });
|
|
|
- });
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'map',
|
|
|
+ map: 'china',
|
|
|
+ ...mapcon,
|
|
|
+ geoIndex: 0,
|
|
|
+ data: seriesData
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ // 使用配置项生成图表
|
|
|
+ that.myChart.setOption(option);
|
|
|
+ // 监听点击事件
|
|
|
+ that.myChart.on('click', function (params) {
|
|
|
+
|
|
|
});
|
|
|
+ });
|
|
|
|
|
|
},
|
|
|
},
|
|
|
@@ -265,34 +259,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.shujuxianshi {
|
|
|
- position: absolute;
|
|
|
- top: 40px;
|
|
|
- left: 55px;
|
|
|
- width: 177px;
|
|
|
- height: auto;
|
|
|
- background: #092a66;
|
|
|
- border: 2px solid #0462b5;
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 16px 20px;
|
|
|
-
|
|
|
- .shujuxianshiTitle {
|
|
|
- font-size: 16px;
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
|
|
- font-weight: 400;
|
|
|
- text-align: left;
|
|
|
- color: #5fe3ff;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .shujuxianshidw {
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
.leixingxianshi {
|
|
|
- width: 120px;
|
|
|
+ // width: 120px;
|
|
|
height: auto;
|
|
|
position: absolute;
|
|
|
bottom: 0px;
|
|
|
@@ -361,28 +330,4 @@ export default {
|
|
|
background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
|
|
|
}
|
|
|
|
|
|
-@keyframes xing {
|
|
|
- 0% {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
-
|
|
|
- 25% {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- transform: scale(0.95);
|
|
|
- }
|
|
|
-
|
|
|
- 75% {
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.my_xing {
|
|
|
- -webkit-animation-name: xing;
|
|
|
- -webkit-animation-timing-function: ease-in-out;
|
|
|
- -webkit-animation-iteration-count: infinite;
|
|
|
- -webkit-animation-duration: 1s;
|
|
|
-}
|
|
|
</style>
|
Moss
