施工单位首页修改2

src/views/home/components/MunicipalChart.vue

@@ -4,7 +4,9 @@
       <div class="top-1">
         <Top1 />
       </div>
-      <div class="top-2"></div>
+      <div class="top-2" style="padding: 0;">
+        <Top2 />
+      </div>
       <div class="top-3">
         <Top3 />
       </div>
@@ -41,6 +43,7 @@
 
 <script>
 import Top1 from './MunicipalChart/Top1'
+import Top2 from './MunicipalChart/Top2'
 import Top3 from './MunicipalChart/Top3'
 import Center1 from './MunicipalChart/Center1'
 import Center2 from './MunicipalChart/Center2'
@@ -52,6 +55,7 @@ export default {
   name: 'provincialChart',
   components: {
     Top1,
+    Top2,
     Top3,
     Center1,
     Center2,

src/views/home/components/MunicipalChart/Center2.vue

@@ -44,7 +44,7 @@
         <thead>
           <!-- 第一行：跨列合并 -->
           <tr>
-            <th>排名</th>
+            <th style="width: 50px">排名</th>
             <th style="width: 190px;">工程名称</th>
             <th style="width: 200px;">在用装备数（台）</th>
             <th style="width: 180px;">投资额（万元）</th>
@@ -78,10 +78,8 @@
 
 <script>
 import TitleBox from '../TitleBox'
-import { getEquipmentUseApi, getVoltageLevelApi } from '@/api/wsScreen'
+import { equipmentInUseInTheProjectApi, getVoltageLevelApi } from '@/api/screen/cityScreen' 
-import {
+
-  listProject
-} from '@/api/system/project'
 export default {
   name: 'Center2',
   components: {
@@ -115,24 +113,24 @@ export default {
     async getList() {
       try {
         const params = {
-          pageNum:1,
+          companyId: sessionStorage.getItem('companyId'),
-          pageSize:5,
+          typeId: this.tabIndex,
-          companyId: sessionStorage.getItem('companyId')
+          voltageLevel: this.proCode
         }
-        const res = await listProject(params)
+        const res = await equipmentInUseInTheProjectApi(params) 
-        this.tableData = res.data.rows || []
+        this.tableData = res.data.list || []
         if (this.tableData.length > 5) {
           this.tableData = this.tableData.slice(0, 5)
         }
-        this.proNum = res.data.proNum || 0
+        this.proNum = res.data.total || 0
-        this.equipNum = res.data.equipmentNum || 0
+        this.equipNum = res.data.useNum || 0
       } catch (error) {
         console.log('🚀 ~ error:', error)
       }
     },
     async getProList() {
       try {
-        const res = await getVoltageLevelApi()
+        const res = await getVoltageLevelApi({})
         this.options = res.data
       } catch (error) {
         console.log('🚀 ~ error:', error)

src/views/home/components/MunicipalChart/Top2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div style="" class="top2-box">
+     <div style="width: 25%;height: 100%;padding-left: 10px;">
+      <el-tabs v-model="activeName" style="width: 100%;padding: 10px;">
+        <el-tab-pane label="装备总量" name="active1"></el-tab-pane>
+        <el-tab-pane label="在用装备数" name="active2"></el-tab-pane> 
+      </el-tabs>
+      <div style="width: 100%;padding: 0 10px;">
+        <div class="num-item top-num">
+          <div class="num" style="color: #FFF;">1359</div>
+          <div class="tip" style="color: #FFF;">装备数量（台）</div>
+          <img src="../../../../assets/cityScreen/towerIcon.png" class="towIcon" alt="">
+        </div>
+        <div class="num-item">
+          <div class="num">1359</div>
+          <div class="tip">装备总价值（万元）</div>
+        </div>
+        <div class="num-item">
+          <div class="num">0 <span style="font-size: 14px;font-weight: normal;">%</span></div>
+          <div class="tip">装备配置率</div>
+        </div>
+        <div class="num-item">
+          <div class="num">0</div>
+          <div class="tip">今日入库（台）</div>
+        </div>
+        <div class="num-item">
+          <div class="num">0</div>
+          <div class="tip">今日出库（台）</div>
+        </div>  
+      </div>
+     </div>
+     <div style="width: 75%;height: 100%;position: relative;">
+      <CountryMap />
+     </div>
+  </div>
+</template>
+
+<script>
+import CountryMap from './countryMap.vue'
+export default {
+  name: 'Top2',
+  components: {CountryMap},
+  data() {
+    return {
+       activeName:"active1"
+    }
+  },
+  created() {
+     
+  },
+  mounted() {
+
+  },
+  methods: {
+     
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.top2-box{
+  height: 100%;width: 100%;
+  background-image: url('../../../../assets/images/map-img.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+}
+::v-deep .el-tabs__item{
+  padding: 0 10px!important;
+}
+::v-deep .el-tabs{
+  padding-bottom: 0!important;
+}
+::v-deep .el-tabs__active-bar{
+  background-color: #2CBAB2;
+}
+::v-deep .el-tabs__nav-wrap::after {
+  height: 0px;
+} 
+::v-deep .is-active{
+  color: #2CBAB2!important;
+  font-weight: 600!important;
+}
+.num-item{
+  height: 80px;
+  width: 100%;
+  background: #fff;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  padding: 15px;
+  position: relative;
+}
+.top-num{
+  background: linear-gradient( 90deg, #00D2BE 0%, #4EACFF 100%);
+}
+.towIcon{
+  position: absolute;right: 10px;
+  bottom: 5px;
+  width: 50px;
+  height: 55px;
+}
+.num{
+  font-size: 24px;
+  font-family: OPPOSans;
+  color: #333333;
+  font-weight: bold;
+  margin-bottom: 6px;
+}
+.tip{
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+</style>

src/views/home/components/MunicipalChart/countryMap.vue

@@ -0,0 +1,538 @@
+<template>
+    <div class="centerTopPage"> 
+        <div class="store-equip">
+            仓库装备：<span class="cont">{{ warehouseEquipmentNum }}</span> 台
+            <div class="bottom-arrow"></div>
+        </div>
+        <div class="out-city-equip">{{ outCityEquipmentNum }}</div>
+        <div class="mapBox">
+            <div id="mapEcharts"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+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'
+import maanshanJson from '@/utils/mapJson/maanshan.json'
+import huaibeiJson from '@/utils/mapJson/huaibei.json'
+import huainanJson from '@/utils/mapJson/huainan.json'
+import tonglingJson from '@/utils/mapJson/tongling.json'
+import anqingJson from '@/utils/mapJson/anqing.json'
+import huangshanJson from '@/utils/mapJson/huangshan.json'
+import chuzhouJson from '@/utils/mapJson/chuzhou.json'
+import fuyangJson from '@/utils/mapJson/fuyang.json'
+import suzhouJson from '@/utils/mapJson/suzhou.json'
+import liuanJson from '@/utils/mapJson/liuan.json'
+import bozhouJson from '@/utils/mapJson/bozhou.json'
+import chizhouJson from '@/utils/mapJson/chizhou.json'
+import xuanchenJson from '@/utils/mapJson/xuanchen.json'
+
+export default {
+    name: 'centerTopPage',
+    props: {
+        sendHeight: {
+            type: String,
+            default: '100%',
+        },
+        sendMapColor: {
+            type: String,
+            default: '#5F93F0',
+        },
+        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: '合肥',
+            btnIndex: 1,
+            warehouseEquipmentNum: null, // 仓库装备数
+            outCityEquipmentNum: null, // 市外装备数
+        }
+    },
+    created() {},
+    mounted() {
+        console.log('🚀 ~ mounted ~ .cityName:', this.$router.currentRoute.query.cityName)
+        this.cityName = this.$router.currentRoute.query.cityName || '合肥'
+        this.getCityJson()
+    },
+    methods: {
+        getCityJson() {
+            if (this.cityName.indexOf('合肥') > -1) {
+                this.mapJson = hefeiJson
+            } else if (this.cityName.indexOf('芜湖') > -1) {
+                this.mapJson = wuhuJson
+            } else if (this.cityName.indexOf('蚌埠') > -1) {
+                this.mapJson = bengbuJson
+            } else if (this.cityName.indexOf('淮南') > -1) {
+                this.mapJson = huainanJson
+            } else if (this.cityName.indexOf('马鞍山') > -1) {
+                this.mapJson = maanshanJson
+            } else if (this.cityName.indexOf('淮北') > -1) {
+                this.mapJson = huaibeiJson
+            } else if (this.cityName.indexOf('铜陵') > -1) {
+                this.mapJson = tonglingJson
+            } else if (this.cityName.indexOf('安庆') > -1) {
+                this.mapJson = anqingJson
+            } else if (this.cityName.indexOf('黄山') > -1) {
+                this.mapJson = huangshanJson
+            } else if (this.cityName.indexOf('滁州') > -1) {
+                this.mapJson = chuzhouJson
+            } else if (this.cityName.indexOf('阜阳') > -1) {
+                this.mapJson = fuyangJson
+            } else if (this.cityName.indexOf('宿州') > -1) {
+                this.mapJson = suzhouJson
+            } else if (this.cityName.indexOf('六安') > -1) {
+                this.mapJson = liuanJson
+            } else if (this.cityName.indexOf('亳州') > -1) {
+                this.mapJson = bozhouJson
+            } else if (this.cityName.indexOf('池州') > -1) {
+                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()
+        },
+        getMapData() {
+            // 获取地区中心坐标
+            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.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()
+            })
+        },
+        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: 1,
+                        roam: false, // 是否允许缩放
+                        animationDurationUpdate: 0,
+                        layoutSize: '60%',
+                        layoutCenter: ['50%', '56%'],
+                        itemStyle: {
+                            normal: {
+                                label: {
+                                    show: false,
+                                },
+                                areaColor: this.sendMapColor, //地图颜色
+                                opacity: 0.6,
+                                borderColor: '#C2F5FB', //地图边框颜色
+                                borderWidth: 1, //地图边框宽度
+                                shadowColor: 'none',
+                                shadowBlur: 10,
+                                color: '#fff',
+                                // 设置扇形的阴影
+                            },
+                            emphasis: {
+                                //选中省份的颜色
+                                areaColor: '#5F93F0',
+                                label: {
+                                    show: true,
+                                },
+                            },
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                fontSize: 8,
+                                fontWeight: 500,
+                                color: 'rgba(255,255,255,0.5)',
+                            },
+                            emphasis: {
+                                show: true,
+                                areaColor: '#5F93F0',
+                                color: '#fff',
+                            },
+                        },
+                        zlevel: 1,
+                        regions: null,
+                        tooltip: {
+                            show: false,
+                        },
+                    },
+                    {
+                        map: 'dishi',
+                        aspectScale: 1,
+                        roam: false, // 是否允许缩放
+                        animationDurationUpdate: 0,
+                        zoom: 1,
+                        layoutSize: '60%',
+                        layoutCenter: ['50%', '58%'],
+                        itemStyle: {
+                            areaColor: '#87D3F4',
+                            borderColor: '#87D3F4',
+                            borderWidth: 1,
+                            opacity: 0.8,
+                            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: '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)
+            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: absolute;
+    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 {
+        // margin-top: -90px;
+        width: 100%;
+        height: 97%;
+        display: flex;
+        position: relative;
+        // 放大1.2倍
+        transform: scale(1.5);
+        #mapEcharts {
+            width: 90%;
+            height: 90%;
+        }
+        #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 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;
+    right: 40px;
+    width: 126px;
+    height: 30px;
+    color: #FFFFFF;
+    background: linear-gradient( 360deg, #00D2BE 0%, #4EACFF 100%);
+    border-radius: 6px 6px 6px 6px;
+    font-size: 12px;
+    padding-top: 4px;
+    // background: url('../../../../assets/cityScreen/mapBg1.png');
+    // background-size: 100% 100%;
+    text-align: center;
+    .cont {
+        color: #fff;
+        font-size: 16px;
+    }
+    .bottom-arrow{
+        width: 32px;
+        height: 18px; 
+        background: url('../../../../assets/cityScreen/position3.png');
+        background-repeat: no-repeat;
+        position: absolute;
+        bottom: -20px;
+        left: 38%;
+    }
+}
+.out-city-equip {
+    position: absolute;
+    top: 366px;
+    right: 80px;
+    width: 40px;
+    height: 52px;
+    color: #fff;
+    font-size: 16px;
+    background: url('../../../../assets/cityScreen/position2.png');
+    background-size: 100% 100%;
+    text-align: center;
+    display: flex; 
+    padding-top: 12px;
+    justify-content: center;
+}
+.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>