地市大屏接口对2

src/api/screen/cityScreen.js

@@ -72,7 +72,14 @@ export const equipmentInUseInTheProjectApi = (data) => {
         params: data,
     })
 } 
-
+// 地图数据
+export const mapDataApi = (data) => {
+    return request({
+        url: '/material-mall/city_screen/mapData',
+        method: 'GET',
+        params: data,
+    })
+} 
 
 // 电压等级下拉选
 export function getVoltageLevelApi(data) {

src/views/screen/cityScreen/components/equiQuantity/index.vue

@@ -8,10 +8,10 @@
         </div>
         <div class="content-view">
             <div class="content-view-item">
-                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                <div style="width: 18%;height: 90%;display: flex;align-items: center;justify-content: center;">
                     <img src="../../../../../assets/cityScreen/quantityIcon1.png" style="width: 90%;height: 80%;" />
                 </div>
-                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                <div style="width: 82%;height: 90%;display: flex;flex-direction: column;">
                     <div class="item-title">
                         <span class="title2">线路装备</span>
                     </div> 
@@ -32,26 +32,26 @@
                         <div class="num2">
                             <span class="unit2">5年</span>
                             <span style="font-weight: 700;">{{lineData.fiveYearCount}}</span>
-                            <span class="unit2">{{lineData.fiveYearRatio}}%</span>
+                            <span class="unit2">{{lineData.fiveYearRatio||0}}%</span>
                         </div>
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #00FEFC;">5-10年</span>
                             <span style="font-weight: 700;">{{lineData.fiveToTenYearCount}}</span>
-                            <span class="unit2" style="color: #00FEFC;">{{lineData.fiveToTenYearRatio}}%</span>
+                            <span class="unit2" style="color: #00FEFC;">{{lineData.fiveToTenYearRatio||0}}%</span>
                         </div>
-                        <div class="num2" style="color: #00FEFC;">
+                        <div class="num2" style="color: #1E8DFF;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
                             <span style="font-weight: 700;">{{lineData.aboveTenYearCount}}</span>
-                            <span class="unit2" style="color: #1E8DFF;">{{lineData.aboveTenYearRatio}}%</span>
+                            <span class="unit2" style="color: #1E8DFF;">{{lineData.aboveTenYearRatio||0}}%</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="content-view-item">
-                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                <div style="width: 18%;height: 90%;display: flex;align-items: center;justify-content: center;">
                     <img src="../../../../../assets/cityScreen/quantityIcon2.png" style="width: 90%;height: 80%;" />
                 </div>
-                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                <div style="width: 82%;height: 90%;display: flex;flex-direction: column;">
                     <div class="item-title">
                         <span class="title2">变电装备</span>
                     </div> 
@@ -77,21 +77,21 @@
                         <div class="num2" style="color: #00FEFC;">
                             <span class="unit2" style="color: #00FEFC;">5-10年</span>
                             <span style="font-weight: 700;">{{bdData.fiveToTenYearCount}}</span>
-                            <span class="unit2" style="color: #00FEFC;">{{bdData.fiveToTenYearRatio}}%</span>
+                            <span class="unit2" style="color: #00FEFC;">{{bdData.fiveToTenYearRatio||0}}%</span>
                         </div>
-                        <div class="num2" style="color: #00FEFC;">
+                        <div class="num2" style="color: #1E8DFF;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
                             <span style="font-weight: 700;">{{bdData.aboveTenYearCount}}</span>
-                            <span class="unit2" style="color: #1E8DFF;">{{bdData.aboveTenYearRatio}}%</span>
+                            <span class="unit2" style="color: #1E8DFF;">{{bdData.aboveTenYearRatio||0}}%</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="content-view-item">
-                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
+                <div style="width: 18%;height: 90%;display: flex;align-items: center;justify-content: center;">
                     <img src="../../../../../assets/cityScreen/quantityIcon3.png" style="width: 90%;height: 80%;" />
                 </div>
-                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
+                <div style="width: 82%;height: 90%;display: flex;flex-direction: column;">
                     <div class="item-title">
                         <span class="title2">电缆装备</span>
                     </div> 
@@ -119,7 +119,7 @@
                             <span style="font-weight: 700;">{{dlData.fiveToTenYearCount}}</span>
                             <span class="unit2" style="color: #00FEFC;">{{dlData.fiveToTenYearRatio}}%</span>
                         </div>
-                        <div class="num2" style="color: #00FEFC;">
+                        <div class="num2" style="color: #1E8DFF;">
                             <span class="unit2" style="color: #1E8DFF;">10年以上</span>
                             <span style="font-weight: 700;">{{dlData.aboveTenYearCount}}</span>
                             <span class="unit2" style="color: #1E8DFF;">{{dlData.aboveTenYearRatio}}%</span>
@@ -457,8 +457,8 @@ export default {
     .unit2{
         font-size: 8px;
         color: #ccc;
-        margin-right: 2px;
+        margin-right: 1px;
-        margin-left: 2px;
+        margin-left: 1px;
     }
     
 }

src/views/screen/cityScreen/index.vue

@@ -12,7 +12,9 @@
                     <Retire style="width: 50%;height: 100%;"></Retire>
                 </div>
             </div>
-            <div class="center_view"></div>
+            <div class="center_view">
+              <CountryMap></CountryMap>
+            </div>
             <div class="right_view">
                 <TopIconsTwo style="width: 96%;height: 13%;margin: 0 auto;"></TopIconsTwo>
                 <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
@@ -37,6 +39,7 @@ import Retire from './components/retire/index'
 import EquiTurnover from './components/equiTurnover/index'
 import EquiUse from './components/equiUse/index'
 import EngineerUsing from './components/engineerUsing/index'
+import CountryMap from '../components/countryMap.vue'
 export default {
     name: 'cityScreen',
     components: {
@@ -48,7 +51,8 @@ export default {
       Retire,
       EquiTurnover,
       EquiUse,
-      EngineerUsing
+      EngineerUsing,
+      CountryMap
     },
     data() {
         return { 
@@ -97,8 +101,7 @@ export default {
 
 .center_view{
     width: 36%;
-    height: 100%; 
+    height: 100%;  
-    border: 1px solid red;
 }
 
 .right_view{

src/views/screen/components/countryMap.vue

@@ -0,0 +1,431 @@
+<template>
+    <div class="centerTopPage">
+        <div class="mapBox">
+            <div id="mapEcharts"></div> 
+        </div>
+    </div>
+</template>
+
+<script>
+
+import * as echarts from 'echarts'    
+import { mapDataApi } from "@/api/screen/cityScreen"; 
+import hefeiJson from '@/utils/mapJson/hefei.json'
+export default {
+    name: 'centerTopPage',
+    props: {
+        sendHeight: {
+            type: String,
+            default: '100%',
+        },
+        sendMapColor: {
+            type: String,
+            default: '#17A1F1',
+        },
+        sendGeo: {
+            type: Array,
+            default: null,
+        },
+        sendNumber: {
+            type: Number,
+        },
+        showLine: {
+            type: Boolean,
+            default: false,
+        },
+        sendProjSpin: {
+          type: Array | Object,
+        },
+    }, 
+    data() {
+        return {
+            type: 1,
+            zoom: 1,
+            zoom2: 1,
+            mapEcharts: null,
+            mapEcharts2: null,
+            mapJson: null,
+            pointArea: this.sendProjSpin,
+            pointAll: [],
+            companyList: [],
+            companyAreaList: [],
+            isCity: 0,
+            cityCount: [],
+            gozoom: 1,
+            geoVal: [],
+            cityName:'合肥'
+        }
+    },
+    created() { 
+    },
+    mounted() { 
+        this.getMapData() 
+    },
+    methods: { 
+         getMapData(){
+            this.mapJson = hefeiJson;
+            // 获取地区中心坐标
+            var mapFeatures = this.mapJson.features.map(item=>{
+                let obj = {
+                    name:item.properties.name,
+                    value:item.properties.center
+                }
+                return obj 
+            })
+            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
+                    }
+                    this.geoVal.push(obj)
+                }) 
+                this.getInitData() 
+            });
+        }, 
+        getInitData() {
+            this.mapEcharts = echarts.init(document.getElementById('mapEcharts'),) 
+            echarts.registerMap('dishi', this.mapJson)
+            this.setMapOption()
+        }, 
+        setMapOption() {
+            this.mapEcharts.clear()    
+            console.log(this.geoVal)
+            let that = this    
+            let imgUrl = require('../../../assets/cityScreen/mapBg2.png')
+            let echartOption = {
+                geo: [
+                    {
+                        show: true,
+                        map: 'dishi',
+                        type: 'map',
+                        aspectScale: 1,
+                        zoom: this.zoom,
+                        roam: false, // 是否允许缩放
+                        animationDurationUpdate: 0,
+                        layoutSize: '80%',
+                        layoutCenter: ['50%', '56%'],
+                        itemStyle: {
+                            normal: {
+                                label: {
+                                    show: false,
+                                },
+                                areaColor: this.sendMapColor, //地图颜色
+                                opacity: 0.7,
+                                borderColor: '#38EAF6', //地图边框颜色
+                                borderWidth: 1, //地图边框宽度
+                                shadowColor: 'none',
+                                shadowBlur: 10,
+                                color: '#fff',
+                                // 设置扇形的阴影
+                            },
+                            emphasis: {
+                                //选中省份的颜色
+                                areaColor: '#061E3D',
+                                label: {
+                                    show: true,
+                                },
+                            },
+                        },
+                        label: {
+                            normal: {
+                                show: false,
+                                fontSize: 12,
+                                fontWeight: 500,
+                                color: 'rgba(255,255,255,0.5)',
+                            },
+                            emphasis: {
+                                show: true,
+                                areaColor: '#061E3D',
+                                color: '#fff',
+                            },
+                        },
+                        zlevel: 1,
+                        regions: null,
+                        tooltip: {
+                            show:false, 
+                        },
+                    },
+                    {
+                        map: 'dishi',
+                        aspectScale: 1,
+                        roam: false, // 是否允许缩放
+                        animationDurationUpdate: 0,
+                        zoom: this.zoom,
+                        layoutSize: '80%',
+                        layoutCenter: ['50%', '58%'],
+                        itemStyle: {
+                            areaColor: '#5785AE',
+                            borderColor: '#5785AE',
+                            borderWidth: 1,
+                            opacity: 0.3,
+                            color: '#fff',
+                        },
+                        zlevel: -1,
+                        silent: true,
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                ],
+                visualMap: {
+                    show: false,
+                    top: 'top',
+                    min: 0,
+                    max: 2,
+                    seriesIndex: 0,
+                    calculable: true,
+                    inRange: {
+                        color: [
+                            '#998f74',
+                            '#04a4f6',
+                            '#00943e',
+                            '#dae07b',
+                            '#b62022',
+                        ],
+                    },
+                },
+                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,
+                    // },
+                ],
+            } 
+            this.mapEcharts.setOption(echartOption)  
+            this.mapEcharts.on('click', function (params) {
+                if (params.componentSubType === 'scatter') {
+                    // console.log(params)
+                    let option = that.mapEcharts.getOption() //获得option对象
+                    // 点击变黄
+                    option.series[0].data.forEach((item) => {
+                        if (params.data.name !== item.name) {
+                            if (item.isActive) {
+                                item.isActive = false
+                            }
+                        } else {
+                            item.isActive = true
+                        }
+                    })
+                    that.mapEcharts.setOption(option)
+                    that.$emit('closeMap', { value: params.data })
+                } 
+            }) 
+        },  
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.centerTopPage {
+    width: 100%;
+    //height: var(--send-height);
+    height: 100%;
+    // background:palegoldenrod;
+    margin-bottom: 2%;
+    padding: 0 10px;
+    position: relative;
+    box-sizing: border-box;
+    .iconMap {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1;
+    }
+    .buttonTop {
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .buttom1 {
+        width: 110px;
+        height: 32px;
+        text-align: center;
+        line-height: 32px;
+        border-radius: 4px;
+        color: #55f3fb;
+        // background: url(../../assets/img/checked.png) no-repeat center;
+        background-size: 110px 32px;
+        margin-right: 12px;
+        cursor: pointer;
+    }
+    .buttom1.on {
+        color: #0095ff;
+        // background: url(../../assets/img/checked_on.png) no-repeat center;
+        background-size: 110px 32px;
+    }
+    .mapBox {
+        width: 100%;
+        height: 97%;
+        display: flex;
+        position: relative;
+        #mapEcharts {
+            width: 100%;
+            height: 100%;
+        }
+        #mapEcharts2 {
+            width: 100%;
+            height: 100%;
+        }
+        z-index: 1000;
+    }
+    .label-box {
+        position: absolute;
+        bottom: 0px;
+        left: 40px;
+        // background: url('../../assets/img/home/labelBg.png') no-repeat;
+        background-size: 100% 100%;
+        padding: 10px 15px;
+        .item {
+            font-size: 14px;
+            line-height: 22px;
+            color: #fff;
+            position: relative;
+            padding-left: 15px;
+            font-size: 16px;
+        }
+        .item:before {
+            content: '';
+            width: 10px;
+            height: 10px;
+            background: #06bbf2;
+            position: absolute;
+            top: 6px;
+            left: 0px;
+        }
+        .itemColor1:before {
+            background: #06bbf2;
+        }
+        .itemColor2:before {
+            background: #2df0fe;
+        }
+        .itemColor3:before {
+            background: #10e0a5;
+        }
+        .itemColor4:before {
+            background: #dcef4e;
+        }
+        .itemColor5:before {
+            background: #f48413;
+        }
+        .itemColor6:before {
+            background: #fc5403;
+        }
+    }
+}
+</style>
+
+<style>
+.scrollTooltip::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+.scrollTooltip::-webkit-scrollbar-thumb {
+    background-color: #1653a6;
+    border-radius: 10px;
+    -webkit-box-shadow: inset 1px 1px 0 #1653a6;
+}
+.itemColor {
+    position: relative;
+    padding-left: 15px;
+    line-height: 22px;
+}
+.itemColor:before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    background: #06bbf2;
+    position: absolute;
+    top: 6px;
+    left: 0px;
+}
+.itemColor1:before {
+    background: #06bbf2;
+}
+.itemColor2:before {
+    background: #2df0fe;
+}
+.itemColor3:before {
+    background: #10e0a5;
+}
+.itemColor4:before {
+    background: #dcef4e;
+}
+.itemColor5:before {
+    background: #f48413;
+}
+.itemColor6:before {
+    background: #fc5403;
+}
+</style>