Merge remote-tracking branch 'origin/ma-mall-ui' into ma-mall-ui
This commit is contained in:
jiang
commit
4fd9388ae2
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<div class="centerTopPage">
|
||||
<div class="top-btns">
|
||||
<div class="btn" :class="{ active: btnIndex == 1 }" @click="">装备总数</div>
|
||||
</div>
|
||||
<div class="store-equip">仓库装备：<span class="cont">{{ warehouseEquipmentNum }}</span> 台</div>
|
||||
<div class="out-city-equip">{{ outCityEquipmentNum }}</div>
|
||||
<div class="mapBox">
|
||||
<div id="mapEcharts"></div>
|
||||
</div>
|
||||
|
|
@ -10,6 +15,7 @@
|
|||
|
||||
import * as echarts from 'echarts'
|
||||
import { mapDataApi } from "@/api/screen/cityScreen";
|
||||
import anhui from '@/utils/mapJson/anhui.json'
|
||||
import hefeiJson from '@/utils/mapJson/hefei.json'
|
||||
import wuhuJson from '@/utils/mapJson/wuhu.json'
|
||||
import bengbuJson from '@/utils/mapJson/bengbu.json'
|
||||
|
|
@ -69,7 +75,10 @@ export default {
|
|||
cityCount: [],
|
||||
gozoom: 1,
|
||||
geoVal: [],
|
||||
cityName:'合肥'
|
||||
cityName:'合肥',
|
||||
btnIndex: 1,
|
||||
warehouseEquipmentNum: null, // 仓库装备数
|
||||
outCityEquipmentNum: null, // 市外装备数
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -113,6 +122,8 @@ export default {
|
|||
this.mapJson = chizhouJson
|
||||
}else if(this.cityName.indexOf("宣城")>-1){
|
||||
this.mapJson = xuanchenJson
|
||||
} else if (this.cityName.indexOf("安徽送变电") > -1) {
|
||||
this.mapJson = anhui
|
||||
}
|
||||
console.log(this.mapJson)
|
||||
this.getMapData()
|
||||
|
|
@ -129,16 +140,26 @@ export default {
|
|||
console.log(mapFeatures)
|
||||
let param = {companyId:sessionStorage.getItem('companyId'),city:this.cityName}
|
||||
mapDataApi(param).then(response => {
|
||||
console.log(response,'mapDataApi')
|
||||
response.data.proList.forEach(item=>{
|
||||
let obj = Object.assign({},item)
|
||||
obj.name = item.county;
|
||||
let index = mapFeatures.findIndex(v=>v.name==item.county)
|
||||
if(index>-1){
|
||||
obj.value = mapFeatures[index].value
|
||||
console.log(response,'mapDataApi--> 大屏地图数据')
|
||||
// response.data.proList.forEach(item=>{
|
||||
// let obj = Object.assign({},item)
|
||||
// obj.name = item.county;
|
||||
// let index = mapFeatures.findIndex(v=>v.name==item.county)
|
||||
// if(index>-1){
|
||||
// obj.value = mapFeatures[index].value
|
||||
// }
|
||||
// this.geoVal.push(obj)
|
||||
// })
|
||||
this.warehouseEquipmentNum = response.data.warehouseEquipmentNum
|
||||
this.outCityEquipmentNum = response.data.outCityEquipmentNum
|
||||
if (response.data.proList.length > 0) {
|
||||
this.geoVal = response.data.proList.map(item=>{
|
||||
return {
|
||||
...item,
|
||||
value: [item.lon, item.lat]
|
||||
}
|
||||
this.geoVal.push(obj)
|
||||
})
|
||||
}
|
||||
this.getInitData()
|
||||
});
|
||||
},
|
||||
|
|
@ -247,75 +268,44 @@ export default {
|
|||
tooltip: {
|
||||
},
|
||||
series: [
|
||||
// {
|
||||
// type: 'map',
|
||||
// map: 'dishi', // 使用中国地图
|
||||
// label: {
|
||||
// show: true, // 显示标签
|
||||
// formatter: '{b}', // b 代表数据名称，即省份名称
|
||||
// color: '#FFF' // 标签文字颜色
|
||||
// },
|
||||
// data: this.geoVal,
|
||||
// // 自定义区域样式等
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter:function(params){
|
||||
// let html = `
|
||||
// <div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
|
||||
// <div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.projectName}</div>
|
||||
// </div>`
|
||||
// return html
|
||||
// // return params.data.projectName+"\r\n"+params.value;
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// {
|
||||
// type: 'scatter', //带有涟漪效果的
|
||||
// map: this.geoVal,
|
||||
// roam: false,
|
||||
// coordinateSystem: 'geo', //使用坐标系
|
||||
// zlevel: 1,
|
||||
// symbolSize: [60, 40],
|
||||
// symbol: (value, params) => {
|
||||
// return ('image://' + require('@/assets/cityScreen/mapBg2.png'))
|
||||
// },
|
||||
// emphasis: {
|
||||
// scale: true,
|
||||
// },
|
||||
// symbolKeepAspect: true,
|
||||
// label: {
|
||||
// normal: {
|
||||
// show: true,
|
||||
// color: '#fff',
|
||||
// fontSize: 10,
|
||||
// fontFamily: 'cursive',
|
||||
// fontWeight: 'normal',
|
||||
// position: 'top',
|
||||
// padding: [0, 0, -35, 0],
|
||||
// formatter: function (params) {
|
||||
// let str="";
|
||||
// str = `${params.data.projectName}`;
|
||||
// return str
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
// data: this.geoVal,
|
||||
// },
|
||||
{
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 10,
|
||||
symbol: 'circle',
|
||||
symbolSize: 15,
|
||||
colorBy: null,
|
||||
itemStyle: {
|
||||
color: '#409EFF',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: function (params) {
|
||||
// 第一行装备数量，第二行工程名称
|
||||
return `{equip|${params.data.useNum}}\n{proj|${params.data.projectName}}`
|
||||
},
|
||||
rich: {
|
||||
equip: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
backgroundColor: '#409EFF', // 蓝色背景
|
||||
borderRadius: 10, // 圆角（如果宽高相等就是圆形）
|
||||
padding: [2, 6], // 内边距控制大小
|
||||
lineHeight: 20, // 高度
|
||||
},
|
||||
proj: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
lineHeight: 16
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.geoVal
|
||||
}
|
||||
],
|
||||
}
|
||||
this.mapEcharts.setOption(echartOption)
|
||||
|
|
@ -380,6 +370,7 @@ export default {
|
|||
background-size: 110px 32px;
|
||||
}
|
||||
.mapBox {
|
||||
margin-top: -70px;
|
||||
width: 100%;
|
||||
height: 97%;
|
||||
display: flex;
|
||||
|
|
@ -440,7 +431,65 @@ export default {
|
|||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.top-btns {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* position: absolute;
|
||||
top: 10px; */
|
||||
.btn:not(:last-child) {
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
padding: 6px 15px;
|
||||
font-family: DS-TITLE;
|
||||
color: #ccc;
|
||||
background-image: url('../../screen/wsScreen/img/btn.png');
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-image: url('../../screen/wsScreen/img/btn-active.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.store-equip {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 50px;
|
||||
width: 116px;
|
||||
height: 75px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
padding-top: 4px;
|
||||
background: url('../../../assets/cityScreen/mapBg1.png');
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
.cont {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.out-city-equip {
|
||||
position: absolute;
|
||||
top: 366px;
|
||||
right: 95px;
|
||||
width: 40px;
|
||||
height: 52px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background: url('../../../assets/cityScreen/position.png');
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.scrollTooltip::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
|
|||
|
|
@ -224,8 +224,18 @@ export default {
|
|||
this.myChart.setOption(option)
|
||||
|
||||
this.myChart.on('click', (params) => {
|
||||
console.log('🚀 ~ initMap ~ params:', params)
|
||||
// params.name去掉 市
|
||||
const city = params.name.replace(/市$/, '')
|
||||
let city = null
|
||||
if (params.seriesType === 'scatter' && params.data) {
|
||||
city =
|
||||
params.data.deptName == '安徽送变电工程有限公司'
|
||||
? '安徽送变电'
|
||||
: params.data.cityName.replace(/市$/, '')
|
||||
} else {
|
||||
city = params.name.replace(/市$/, '')
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
path: '/screen/cityScreen',
|
||||
query: {
|
||||
|
|
@ -236,10 +246,10 @@ export default {
|
|||
|
||||
// 鼠标移入时展示
|
||||
this.myChart.on('mouseover', (params) => {
|
||||
console.log('🚀 ~ initMap ~ params:', params)
|
||||
// console.log('🚀 ~ initMap ~ params:', params)
|
||||
let city = null
|
||||
if (params.seriesType === 'scatter' && params.data) {
|
||||
console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
|
||||
// console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
|
||||
city = params.data
|
||||
} else {
|
||||
this.selectedCity = null
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -38,7 +38,7 @@
|
|||
<UnitEquipmentConfig />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-explain">
|
||||
<div class="bottom-explain" @click="openRemarkMore">
|
||||
<div>备注说明：</div>
|
||||
<div>
|
||||
<div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div>
|
||||
|
|
@ -75,6 +75,7 @@
|
|||
<TotalPriceMore ref="totalPriceMore" />
|
||||
<EquipItemMore ref="equipItemMore" />
|
||||
<SystemEquip ref="systemEquip" />
|
||||
<RemarkMore ref="remarkMore" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -88,6 +89,7 @@ import EquipStatusMore from './EquipStatusMore.vue'
|
|||
import TotalPriceMore from './TotalPriceMore.vue'
|
||||
import EquipItemMore from './EquipItemMore.vue'
|
||||
import SystemEquip from './SystemEquip.vue'
|
||||
import RemarkMore from './RemarkMore'
|
||||
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
|
||||
|
||||
export default {
|
||||
|
|
@ -101,6 +103,7 @@ export default {
|
|||
EquipItemMore,
|
||||
TotalPriceMore,
|
||||
SystemEquip,
|
||||
RemarkMore,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -179,6 +182,9 @@ export default {
|
|||
openEquipItemMore() {
|
||||
this.$refs.equipItemMore.openDialog()
|
||||
},
|
||||
openRemarkMore() {
|
||||
this.$refs.remarkMore.openDialog()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -264,6 +270,7 @@ export default {
|
|||
color: #97aad6;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottom-tip {
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue