zfire-newmall-admin/src/views/bigViews/dataView1/components/mapdata.vue

<template>
  <moduleEnclosure>
    <zj-page-container>
      <map-data-statistics />
      <zj-page-fill>
        <div style="
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
          ">
          <div id="chart_7" class="chart t_btn9" style="width: 100%; height: 100%"></div>
          <div class="leixingxianshi">
            <div class="viewfilediv">
              <div class="zfx" style="width:60px; background: linear-gradient(to right, #6ada40,#ebe24a,#d73921);">
              </div>
            </div>
          </div>
          <div class="pingtaixianshisheng" v-if="shengData">
            <div class="shengbiaoti">
              {{ isSelectBool }}
              <i @click="() => {
            shengData = null
            if (isSelectBool) {
              myChart.dispatchAction({
                type: 'unselect',
                name: [isSelectBool]
              })
              isSelectBool = ''
            }

          }" style="float: right;color: #fff;margin-top: 12px; margin-right: -8px;" class="el-icon-circle-close"></i>
            </div>
            <div class="shengshujukuang">
              <div>商户数：{{ shengData.companyNum }}</div>
              <div>师傅数量：{{ shengData.allWorker }}</div>
              <div>分销员数：{{ shengData.allService }}</div>
              <div>用户数：{{ shengData.allUser }}</div>
              <div>总工单：{{ shengData.allWorkerOrderNum }}</div>
              <div>未完工：{{ shengData.neverWorkerNum }}</div>
              <div>销售订单：{{ shengData.salesOrderNum }}</div>
              <div>增值订单：{{ shengData.increOrderNum }}</div>
            </div>
          </div>
          <div v-if="list_.length" class="pingtaixianshisheng" style="width: 100%;height: auto;min-height: 100px;">
            <div class="shengbiaoti"
              style="font-size: 14px;border-bottom: 1px solid #50C9FD; line-height: 38px; margin-bottom: 8px;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;position: relative;padding-right: 30px;">
              <!-- <span>{{ isSelectBool }}</span> -->
              <span>{{ userInfo && userInfo.city }}</span>
              <span>总已完工 {{ cityInfo.num }}单/台 总未完工 <span>{{ cityInfo.numWwg }}</span>单/台</span>
              <i @click="guanbitanchuang2" style="position: absolute; top: 10px; right: -8px;color: #fff;"
                class="el-icon-circle-close"></i>
            </div>
            <div style="width:100%;">
              <table style="width:100%;">
                <thead style="width:100%;">
                  <tr>
                    <th style="color: #50C9FD;font-size:12px;width: 17.5%;text-align: left;">
                      <div align="left">街道</div>
                    </th>
                    <th style="color: #50C9FD;font-size:12px;width: 16.5%;text-align: left;">
                      <div align="left">安装完工/未完工(台)</div>
                    </th>
                    <th style="color: #50C9FD;font-size:12px;width: 16.5%;text-align: left;">
                      <div align="left">维修完工/未完工(台)</div>
                    </th>
                    <th style="color: #50C9FD;font-size:12px;width: 16.5%;text-align: left;">
                      <div align="left">清洗完工/未完工(台)</div>
                    </th>
                    <th style="color: #50C9FD;font-size:12px;width: 16.5%;text-align: left;">
                      <div align="left">增值完工/未完工(台)</div>
                    </th>
                    <th style="color: #50C9FD;font-size:12px;width: 16.5%;text-align: left;">
                      <div align="left">维保完工/未完工(台)</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in list_" :key="index">
                    <td>
                      <div class="bkiuybhlinjm left" style="font-size: 14px;">{{ item.streetName }}</div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px;">{{ item.azgd }}</span>
                        <span style="padding: 0 2px;">/</span>
                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.azgdwwg }}</span></span>
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px;">{{ item.wxgd }}</span>
                        <span style="padding: 0 2px;">/</span>
                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wxgdwwg }}</span></span>
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px;">{{ item.qxgd }}</span>
                        <span style="padding: 0 2px;">/</span>
                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.qxgdwwg }}</span></span>
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px;">{{ item.zzgd }}</span>
                        <span style="padding: 0 2px;">/</span>
                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.zzgdwwg }}</span></span>
                      </div>
                    </td>
                    <td>
                      <div class="bkiuybhlinjm">
                        <span style="font-size: 14px;">{{ item.wbgd }}</span>
                        <span style="padding: 0 2px;">/</span>
                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wbgdwwg }}</span></span>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div style="width:100%;display: flex;justify-content: center;align-items: center">
                <el-button type="text" :disabled="!(pageNum > 1)" @click="shangyiye">上一页</el-button>
                <div style="width:50px;text-align: center;color:#50C9FD">{{ pageNum }}</div>
                <el-button type="text" :disabled="!(parseInt(total / 5) > pageNum)" @click="xiayiye">下一页</el-button>
              </div>
            </div>
          </div>
        </div>
      </zj-page-fill>
    </zj-page-container>
  </moduleEnclosure>
</template>

<script>
import zhejiang from './js/zhejiang.js';
import moduleEnclosure from '@/components/moduleEnclosure.vue';
import mapDataStatistics from './mapDataStatistics.vue';
import * as echarts from 'echarts';
import { bigGetRegion, bigGetLarge9, bigGetLarge10, bigList, bigGetLarge1, bigGetLarge11 } from '@/api/common.js';
// 计算 GeoJSON 数据的边界框
function calculateBoundingBox(geoJsonData) {
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  geoJsonData.features.forEach((feature) => {
    const coordinates = feature.geometry.coordinates;
    const type = feature.geometry.type;
    if (type === 'Polygon') {
      coordinates.forEach((polygon) => {
        polygon.forEach((coord) => {
          minX = Math.min(minX, coord[0]);
          minY = Math.min(minY, coord[1]);
          maxX = Math.max(maxX, coord[0]);
          maxY = Math.max(maxY, coord[1]);
        });
      });
    } else if (type === 'MultiPolygon') {
      coordinates.forEach((multiPolygon) => {
        multiPolygon.forEach((polygon) => {
          polygon.forEach((coord) => {
            minX = Math.min(minX, coord[0]);
            minY = Math.min(minY, coord[1]);
            maxX = Math.max(maxX, coord[0]);
            maxY = Math.max(maxY, coord[1]);
          });
        });
      });
    }
  });
  return { minX, minY, maxX, maxY };
}
export default {
  components: {
    moduleEnclosure,
    mapDataStatistics,
  },
  data() {
    return {
      list: [],
      geoCoordMap: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name,
          value: item.properties.center,
        };
      }),
      data: zhejiang.features.map(function (item) {
        return {
          name: item.properties.name,
        };
      }),
      cIndex: 0,
      oldcIndex: 0,
      myChart: null,
      getLarge9: [],
      getLarge10: [],
      shengData: null,
      isSelectBool: "",
      pageNum: 1,
      total: 0,
      list_: [],
      cityInfo: {}
    };
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
  },
  watch: {
    "userInfo.type": {
      handler(newVal, oldVal) {
        this.init(true)
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    guanbitanchuang() {
      this.shengData = null
      if (this.isSelectBool) {
        this.myChart.dispatchAction({
          type: 'unselect',
          name: [this.isSelectBool]
        })
        this.isSelectBool = ''
      }
    },
    guanbitanchuang2() {
      this.pageNum = 1
      this.total = 0
      this.list_ = []
      this.cityInfo = {}
      if (this.isSelectBool) {
        this.myChart.dispatchAction({
          type: 'unselect',
          name: [this.isSelectBool]
        })
        this.isSelectBool = ''
      }
    },
    init() {
      if (this.userInfo) {
        if (this.userInfo.type == 2) {
          this.getbigGetLarge9({ country: 100000 });
        } else {
          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city });
        }
      }
    },
    getbigGetLarge9(pam) {
      bigGetLarge9().then(res => {
        this.getLarge9 = res.data
        this.getLarge10 = []
        this.echart_7(pam);
      })
    },
    getbigGetLarge10(pam) {
      bigGetLarge10(pam).then(res => {
        this.getLarge9 = []
        this.getLarge10 = res.data
        this.echart_7({ province: this.userInfo.province, city: this.userInfo.city });
      })
    },
    echart_7(pam) {
      var that = this;
      if (that.myChart) {
        that.myChart.dispose();
      }
      bigGetRegion(pam).then(res => {
        // 初始化 ECharts 实例
        that.myChart = echarts.init(document.getElementById('chart_7'));
        const geoJsonData = JSON.parse(res.data);
        // 计算边界框
        const boundingBox = calculateBoundingBox(geoJsonData);
        // 计算中心点
        const center = [
          (boundingBox.minX + boundingBox.maxX) / 2,
          (boundingBox.minY + boundingBox.maxY) / 2
        ];
        echarts.registerMap('china', geoJsonData);
        // 指定城市和颜色
        var cityColors = {};
        this.getLarge9.map(name => {
          cityColors[name] = "#009eff";
        });
        this.getLarge10.map(item => {
          cityColors[item.area] = item.num <= 2 ? "#6ada40" : item.num <= 4 ? "#ebe24a" : item.num > 4 ? "#d73921" : "none"
        });
        // 构建 series 数据
        var seriesData = Object.keys(cityColors).map(function (city) {
          return {
            name: city,
            itemStyle: {
              normal: {
                areaColor: cityColors[city],
                borderColor: cityColors[city],
              },
              emphasis: {
                label: { show: true, color: "#ffffff", },
                areaColor: 'none',
                borderColor: 1
              }
            },
          };
        });
        var mapcon = {
          label: {
            emphasis: {
              textStyle: {
                color: '#beecff',
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0,144,255, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.4,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(0,144,255, 0)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, .1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,144,255, 1)', // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: 'rgba(0,144,255, 1)',
              shadowOffsetX: -1,
              shadowOffsetY: 1,
              shadowBlur: 10,
            },
            emphasis: {
              label: { show: true, color: "#ffffff", },
              areaColor: 'none',
              borderColor: 1
            }
          },
          select: {
            // 地图选中区域样式
            label: {
              // 选中区域的label(文字)样式
              color: '#fff',
            },
            itemStyle: {
              // 选中区域的默认样式
              areaColor: '#7024fb',
            },
          },
          animation: false,
        };
        // 配置项
        var option = {
          tooltip: {
            confine: true,
            trigger: 'item',
            formatter: '{b}'
          },
          geo: {
            map: 'china',
            roam: true,
            zoom: pam.country ? 1.3 : pam.city ? 4.5 : pam.province ? 1.7 : 2, // 设置缩放比例
            center: center,
            ...mapcon,
            regions: [
              ...seriesData,
              {
                name: "南海诸岛",
                itemStyle: {
                  normal: {
                    opacity: 0,
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          },
          series: [{
            type: 'map',
            map: 'china',
            ...mapcon,
            geoIndex: 0,
            data: seriesData,
            emphasis: {
              label: { show: true, color: "#ffffff", },
              areaColor: 'none',
              borderColor: 1
            }
          }]
        };
        // 使用配置项生成图表
        that.myChart.setOption(option);
        var bool_i = false
        that.myChart.on('selectchanged', function (params) {
          bool_i = !!params.selected.length
        });
        // 监听点击事件
        that.myChart.on('click', function (params) {
          if (bool_i) {
            if (that.userInfo) {
              if (that.userInfo.type == 2) {
                // 平台
                if (!!cityColors[params.name]) {
                  bigGetLarge1({
                    province: params.name
                  }).then(res => {
                    that.shengData = res.data
                    that.isSelectBool = params.name
                  })
                }
              } else {
                // 商户
                if (!!cityColors[params.name]) {
                  that.isSelectBool = params.name
                  that.pageNum = 1
                  that.total = 0
                  that.pagedatalist()
                  bigGetLarge11({
                    // area: that.isSelectBool,
                    city: that.userInfo.city,
                    province: that.userInfo.province,
                  }).then(res => {
                    that.cityInfo = res.data
                  })
                }
              }
            }
          }
          if (!cityColors[params.name]) {
            that.guanbitanchuang()
            that.guanbitanchuang2()
          }
        });
      });
    },
    pagedatalist() {
      if (this.isSelectBool) {
        bigList({
          pageNum: this.pageNum,
          pageSize: 5,
          city: this.userInfo.city,
          province: this.userInfo.province,
          area: this.isSelectBool
        }).then(res => {
          this.total = res.data.total
          this.list_ = res.data.records
        })
      }
    },
    xiayiye() {
      if (parseInt(this.total / 5) > this.pageNum) {
        this.pageNum++
        this.pagedatalist()
      } else {

      }
    },
    shangyiye() {
      if (this.pageNum > 1) {
        this.pageNum--
        this.pagedatalist()
      } else {

      }
    }
  },
};
</script>

<style scoped lang="scss">
.pingtaixianshisheng {
  position: absolute;
  top: 0;
  left: 0;
  width: 467px;
  height: 120px;
  background: #04418F;
  border-radius: 5px;
  opacity: 0.8;
  z-index: 999;
  box-sizing: border-box;
  padding: 0 20px;

  .shengbiaoti {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 18px;
    color: #50C9FD;
    line-height: 49px;
  }

  .shengshujukuang {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
    line-height: 26px;

    div {
      width: 25%;
    }
  }
}

.leixingxianshi {
  // width: 120px;
  height: auto;
  position: absolute;
  bottom: 0px;
  right: -10px;
}

.viewfilediv {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  span {
    font-size: 14px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: right;
    color: #8ab1dc;
  }
}

.zfx {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.c1 {
  background: linear-gradient(0deg, #21c8fb 0%, #21c8fb 100%);
}

.c2 {
  background: linear-gradient(0deg, #ffc737 0%, #ffc737 100%);
}

.c3 {
  background: linear-gradient(0deg, #ea539b 0%, #e34691 100%);
}

.c4 {
  background: linear-gradient(0deg, #59cfe6 0%, #59cfe6 100%);
}

.c5 {
  background: linear-gradient(0deg, #8061ff 0%, #8061ff 100%);
}

.c6 {
  color: #e15960 !important;
}

.c7 {
  color: #ffffff !important;
}

.c8 {
  color: #ff9900 !important;
}

.c9 {
  background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
}

.bkiuybhlinjm {
  padding: 8px 0;
  color: #fff;
  box-sizing: border-box;
  padding-right: 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  &.left {
    justify-content: flex-start;
  }
}
</style>