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

src/views/screen/components/countryMap.vue

@@ -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')  
+                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.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',
+                        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)  
@@ -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;

src/views/screen/wsScreen/components/center/index.vue

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

src/views/screen/wsScreen/components/left/index.vue

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