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

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
parent ebe21dfd11 62dd70f50f
commit 4fd9388ae2
5 changed files with 2861 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/cityScreen/position.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

211
src/views/screen/components/countryMap.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div class="centerTopPage"> <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 class="mapBox">
<div id="mapEcharts"></div> <div id="mapEcharts"></div>
</div> </div>
@ -10,6 +15,7 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { mapDataApi } from "@/api/screen/cityScreen"; import { mapDataApi } from "@/api/screen/cityScreen";
import anhui from '@/utils/mapJson/anhui.json'
import hefeiJson from '@/utils/mapJson/hefei.json' import hefeiJson from '@/utils/mapJson/hefei.json'
import wuhuJson from '@/utils/mapJson/wuhu.json' import wuhuJson from '@/utils/mapJson/wuhu.json'
import bengbuJson from '@/utils/mapJson/bengbu.json' import bengbuJson from '@/utils/mapJson/bengbu.json'
@ -69,7 +75,10 @@ export default {
cityCount: [], cityCount: [],
gozoom: 1, gozoom: 1,
geoVal: [], geoVal: [],
cityName:'合肥' cityName:'合肥',
btnIndex: 1,
warehouseEquipmentNum: null, // 仓库装备数
outCityEquipmentNum: null, // 市外装备数
} }
}, },
created() { created() {
@ -113,6 +122,8 @@ export default {
this.mapJson = chizhouJson this.mapJson = chizhouJson
}else if(this.cityName.indexOf("宣城")>-1){ }else if(this.cityName.indexOf("宣城")>-1){
this.mapJson = xuanchenJson this.mapJson = xuanchenJson
} else if (this.cityName.indexOf("安徽送变电") > -1) {
this.mapJson = anhui
} }
console.log(this.mapJson) console.log(this.mapJson)
this.getMapData() this.getMapData()
@ -129,16 +140,26 @@ export default {
console.log(mapFeatures) console.log(mapFeatures)
let param = {companyId:sessionStorage.getItem('companyId'),city:this.cityName} let param = {companyId:sessionStorage.getItem('companyId'),city:this.cityName}
mapDataApi(param).then(response => { mapDataApi(param).then(response => {
console.log(response,'mapDataApi') console.log(response,'mapDataApi--> 大屏地图数据')
response.data.proList.forEach(item=>{ // response.data.proList.forEach(item=>{
let obj = Object.assign({},item) // let obj = Object.assign({},item)
obj.name = item.county; // obj.name = item.county;
let index = mapFeatures.findIndex(v=>v.name==item.county) // let index = mapFeatures.findIndex(v=>v.name==item.county)
if(index>-1){ // if(index>-1){
obj.value = mapFeatures[index].value // obj.value = mapFeatures[index].value
} // }
this.geoVal.push(obj) // 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.getInitData() this.getInitData()
}); });
}, },
@ -247,75 +268,44 @@ export default {
tooltip: { tooltip: {
}, },
series: [ series: [
// { {
// type: 'map', type: 'scatter',
// map: 'dishi', // 使用中国地图 coordinateSystem: 'geo',
// label: { zlevel: 10,
// show: true, // 显示标签 symbol: 'circle',
// formatter: '{b}', // b 代表数据名称，即省份名称 symbolSize: 15,
// color: '#FFF' // 标签文字颜色 colorBy: null,
// }, itemStyle: {
// data: this.geoVal, color: '#409EFF',
// // 自定义区域样式等 },
// itemStyle: { label: {
// normal: { show: true,
// label: { position: 'top',
// show: true, formatter: function (params) {
// formatter:function(params){ // 第一行装备数量，第二行工程名称
// let html = ` return `{equip|${params.data.useNum}}\n{proj|${params.data.projectName}}`
// <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> rich: {
// </div>` equip: {
// return html color: '#fff',
// // return params.data.projectName+"\r\n"+params.value; fontSize: 14,
// }, fontWeight: 'bold',
// } align: 'center',
// }, verticalAlign: 'middle',
// emphasis: { backgroundColor: '#409EFF', // 蓝色背景
// label: { borderRadius: 10, // 圆角（如果宽高相等就是圆形）
// show: true padding: [2, 6], // 内边距控制大小
// } lineHeight: 20, // 高度
// } },
// } proj: {
// } color: '#fff',
fontSize: 12,
// { lineHeight: 16
// type: 'scatter', //带有涟漪效果的 }
// map: this.geoVal, }
// roam: false, },
// coordinateSystem: 'geo', //使用坐标系 data: this.geoVal
// 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,
// },
], ],
} }
this.mapEcharts.setOption(echartOption) this.mapEcharts.setOption(echartOption)
@ -380,6 +370,7 @@ export default {
background-size: 110px 32px; background-size: 110px 32px;
} }
.mapBox { .mapBox {
margin-top: -70px;
width: 100%; width: 100%;
height: 97%; height: 97%;
display: flex; display: flex;
@ -440,7 +431,65 @@ export default {
} }
</style> </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 { .scrollTooltip::-webkit-scrollbar {
width: 10px; width: 10px;
height: 10px; height: 10px;

16
src/views/screen/wsScreen/components/center/index.vue
View File

@ -224,8 +224,18 @@ export default {
this.myChart.setOption(option) this.myChart.setOption(option)
this.myChart.on('click', (params) => { this.myChart.on('click', (params) => {
console.log('🚀 ~ initMap ~ params:', params)
// params.name去掉 市 // 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({ this.$router.push({
path: '/screen/cityScreen', path: '/screen/cityScreen',
query: { query: {
@ -236,10 +246,10 @@ export default {
// 鼠标移入时展示 // 鼠标移入时展示
this.myChart.on('mouseover', (params) => { this.myChart.on('mouseover', (params) => {
console.log('🚀 ~ initMap ~ params:', params) // console.log('🚀 ~ initMap ~ params:', params)
let city = null let city = null
if (params.seriesType === 'scatter' && params.data) { if (params.seriesType === 'scatter' && params.data) {
console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data) // console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
city = params.data city = params.data
} else { } else {
this.selectedCity = null this.selectedCity = null

2710
src/views/screen/wsScreen/components/left/RemarkMore.vue Normal file
View File

File diff suppressed because it is too large Load Diff

9
src/views/screen/wsScreen/components/left/index.vue
View File

@ -38,7 +38,7 @@
<UnitEquipmentConfig /> <UnitEquipmentConfig />
</div> </div>
</div> </div>
<div class="bottom-explain"> <div class="bottom-explain" @click="openRemarkMore">
<div>备注说明：</div> <div>备注说明：</div>
<div> <div>
<div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div> <div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div>
@ -75,6 +75,7 @@
<TotalPriceMore ref="totalPriceMore" /> <TotalPriceMore ref="totalPriceMore" />
<EquipItemMore ref="equipItemMore" /> <EquipItemMore ref="equipItemMore" />
<SystemEquip ref="systemEquip" /> <SystemEquip ref="systemEquip" />
<RemarkMore ref="remarkMore" />
</div> </div>
</template> </template>
@ -88,6 +89,7 @@ import EquipStatusMore from './EquipStatusMore.vue'
import TotalPriceMore from './TotalPriceMore.vue' import TotalPriceMore from './TotalPriceMore.vue'
import EquipItemMore from './EquipItemMore.vue' import EquipItemMore from './EquipItemMore.vue'
import SystemEquip from './SystemEquip.vue' import SystemEquip from './SystemEquip.vue'
import RemarkMore from './RemarkMore'
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen' import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
export default { export default {
@ -101,6 +103,7 @@ export default {
EquipItemMore, EquipItemMore,
TotalPriceMore, TotalPriceMore,
SystemEquip, SystemEquip,
RemarkMore,
}, },
data() { data() {
return { return {
@ -179,6 +182,9 @@ export default {
openEquipItemMore() { openEquipItemMore() {
this.$refs.equipItemMore.openDialog() this.$refs.equipItemMore.openDialog()
}, },
openRemarkMore() {
this.$refs.remarkMore.openDialog()
},
}, },
} }
</script> </script>
@ -264,6 +270,7 @@ export default {
color: #97aad6; color: #97aad6;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
cursor: pointer;
} }
.bottom-tip { .bottom-tip {
} }