Merge remote-tracking branch 'origin/ma-mall-ui' into ma-mall-ui

This commit is contained in:
jiang 2025-09-22 18:52:50 +08:00
commit 4fd9388ae2
5 changed files with 2861 additions and 85 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

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

View File

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

View File

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