taicangPopulation2/src/views/shop.vue

<template>
  <div class="pc-container">
    <NavigationBar
      mainTitle="森茂汽车城商铺信息管理系统"
      subTitle="Shop information management system"
      :showLeft="false"
      :showRight="false"
    ></NavigationBar>
    <mars-map ref="map"></mars-map>
    <foldpanelLeft title="太仓森茂国际汽车城">
      <div class="data-box box-left">
        <div class="introduction">
          太仓市森茂汽车城于2008年6月28日奠基建设，由太仓市森茂汽车城开发有限公司按市场化运作管理。汽车城位于太仓市经济开发区太平北路路111号，在新客运总站北侧，占地约150亩，建筑面积15万平方米；汽车城规划面积1000亩。
          太仓市委、市政府认真贯彻落实国家《汽车产业调整和振兴规划》，以高瞻远瞩的战略眼光，高度重视又好又快地发展太仓的汽车产业，在经济开发区特地规划近1000多亩的地块，设立太仓汽车产业经济板块，开发建设太仓汽车产业园区。采取“整体规划、分步实施”的形式，分三期开发建设。
          本项目位于太仓经济开发区的核心区域，全区共引进各类项目2000多家，总投资额近500亿元，其中外资近400家，形成了以电子信息、精密机械、汽车配件为主
          ，以房地产、旅游娱乐、生活服务等三产业项目为辅的投资结构，同时形成了以德国为主的欧美企业群、以日本为主的日韩工业群和以港台为主的国内企业群等三大企业集群，其中中高级人才达10万人。
          本项目是太仓首家HOPSCA城市综合体，由五星级酒店、5A级智能写字楼、百亩公园、购物中心、俱乐部、高档公寓组成，集商业、商务、居住、人文、环境等城市生活各大要素融合在一起，资源集合、功能齐全，就像上海徐家汇商圈一样，各家商场错位经营，共同形成财富的叠加效应。这样的城市功能组合在国际上都是非常先进。
        </div>
        <img
          src="../assets/images/ui/shop-image.png"
          class="introduction-img"
          alt=""
        />
      </div>
    </foldpanelLeft>
    <foldpanelRight>
      <div class="data-box box-right">
        <div class="shop-sum">
          <div class="sum-data">
            <div class="data-lable">商铺总数</div>
            <div class="data-value">
              {{ total }} <span class="value-unit">个</span>
            </div>
          </div>
        </div>
        <div class="panel-item" style="flex: 2.6">
          <introduceTitle title="经营类别"></introduceTitle>
          <div class="item-data">
            <div
              v-show="item.type != 'null'"
              v-for="(item, index) in typeList"
              :key="index"
              @click="clickType(index, item.type)"
              class="img-type"
              :class="currentIndex == index ? 'activeType' : ''"
            >
              <div class="data-row">
                <div class="type-lable">{{ item.type }}</div>
                <div class="type-value">
                  {{ item.count }} <span class="value-unit">家</span>
                </div>
              </div>

              <img :src="filtertypeImage(item.type)" alt="" />
              <div class="filter"></div>
            </div>
          </div>
        </div>
        <div class="panel-item">
          <introduceTitle title="经营状态"></introduceTitle>
          <div class="item-state">
            <div class="state-type">
              <div class="type-value state1">{{ stateNum.normal }}</div>
              <img src="@/assets/images/ui/shop-state1.png" alt="" />
              <div class="type-lable">正常营业</div>
            </div>
            <div class="state-type">
              <div class="type-value state0">{{ stateNum.zz }}</div>
              <img src="@/assets/images/ui/shop-state0.png" alt="" />
              <div class="type-lable">正在转租</div>
            </div>

            <div class="state-type">
              <div class="type-value state2">{{ stateNum.wcz }}</div>
              <img src="@/assets/images/ui/shop-state2.png" alt="" />
              <div class="type-lable">门面暂未出租</div>
            </div>
          </div>
        </div>
      </div>
    </foldpanelRight>
    <div class="shop-type-list" v-show="show">
      <div class="close-type" @click="handleClose()"></div>
      <div class="type-title">{{ category }}商家列表</div>
      <div class="type-list">
        <div class="list-header">
          <div>序号</div>
          <div>商家名称</div>
        </div>
        <div class="type-boby">
          <div
            class="boby-item"
            v-for="(item, index) in list"
            :key="item.id"
            @click="mapLocation(item)"
          >
            <div>{{ index + 1 }}</div>
            <div>{{ item.signName }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pointer" v-show="show"></div>
  </div>
</template>

<script>
import { getBShoptype, getBShopstatus, getBShop } from "@/api/other.js";
import NavigationBar from "@/components/NavigationBar/index.vue";
import MarsMap from "@/views/components/xiaoqu/map/shopMap.vue";
import { foldpanelLeft, foldpanelRight } from "@/views/components/index.js";
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
export default {
  data() {
    return {
      list: [],
      category: "",
      show: false,
      currentIndex: null,
      total: 0,
      xiaoquId: null,
      typeList: [],
      stateNum: {
        normal: 0,
        zz: 0,
        wcz: 0,
      },
    };
  },
  components: {
    NavigationBar,
    MarsMap,
    foldpanelLeft,
    foldpanelRight,
    introduceTitle,
  },
  created() {
    this.xiaoquId = this.$route.query.id;
    this.$nextTick(() => {
      this.getShopSum();

      this.getShopType();

      this.getShopState();
    });
  },
  methods: {
    mapLocation(item) {
      this.$refs.map.mapLocation(item);
    },
    /**
     *
     * @param index 索引
     * @param category 类型
     */
    async clickType(index, category) {
      if (this.currentIndex == index) return;
      this.category = category;
      let res = await getBShop({ category: category });
      this.list = res.rows;
      let typeList = document.getElementsByClassName("img-type");
      let pointer = document.getElementsByClassName("pointer")[0];
      const rect = typeList[index].getBoundingClientRect();
      pointer.style.top = rect.top + 10 + "px";
      this.currentIndex = index;
      this.show = true;
    },
    handleClose() {
      this.show = false;
      this.currentIndex = null;

      this.$refs.map.closehighlightStyle();
    },
    filtertypeImage(type) {
      try {
        return require(`@/assets/images/ui/${type}.png`);
      } catch (error) {
        return require(`@/assets/images/ui/no-type.png`);
      }
    },
    async getShopSum() {
      const result = await getBShop();
      this.total = result.total;
    },

    async getShopType() {
      const result = await getBShoptype();
      this.typeList = result.data;
    },

    async getShopState() {
      const result = await getBShopstatus();
      result.data.map((item) => {
        if (item.type == "正常营业") this.stateNum.normal = item.count;
        if (item.type == "门面暂未出租") this.stateNum.wcz = item.count;
        if (item.type == "正在转租") this.stateNum.zz = item.count;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.pc-container {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  overflow: hidden;
  .data-box {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .box-left {
    display: flex;
    flex-direction: column;
    .introduction {
      flex: 1;
      text-indent: 2em;
      font-size: 14px;
      color: #adbfd9;
      line-height: 25px;
    }
    .introduction-img {
      height: 180px;
      margin-top: 10px;
    }
  }

  .shop-type-list {
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    right: 390px;
    z-index: 50;
    width: 365px;
    height: 520px;
    background: url("../assets/images/ui/shop-type.png");
    background-size: 100% 100%;
    .close-type {
      cursor: pointer;
      position: absolute;
      top: 6px;
      right: 0;
      height: 17px;
      width: 23px;
      background: url("../assets/images/ui/popup-close.png");
      background-size: 100% 100%;
    }
    .type-title {
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      background: linear-gradient(0deg, #5cb4ff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .type-list {
      height: 95%;
      padding-top: 6px;
    }
    .list-header {
      height: 40px;
      background: #3e97e2;
      display: flex;
      align-items: center;
      & > div {
        padding: 0 6px;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
      }
      & > div:last-child {
        flex: 1;
      }
    }
    .type-boby {
      height: calc(100% - 40px);
      overflow-y: auto;
      .boby-item {
        cursor: pointer;
        height: 40px;
        background: rgba(16, 22, 30, 0.5);
        display: flex;
        align-items: center;
        border-bottom: 1px solid #435165;
        & > div {
          padding: 0 6px;
          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
        }
        & > div:last-child {
          padding-left: 25px;
          flex: 1;
        }
      }
      .boby-item:hover {
        background: #0265cb;
      }
    }
  }
  .pointer {
    position: fixed;
    right: 380px;
    z-index: 100;

    height: 15px;
    width: 10px;
    background: url("~@/assets/images/ui/pointer.png");
    background-size: 100% 100%;
  }

  .box-right {
    display: flex;
    flex-direction: column;
    .shop-sum {
      margin: 30px auto;
      height: 85px;
      width: 98%;
      background: url("~@/assets/images/ui/shop-sum.png");
      background-size: 100% 100%;
      .sum-data {
        padding-left: 120px;
        padding-right: 10px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .data-lable {
          font-size: 16px;
          color: #ffffff;
          font-family: "Alibaba-PuHuiTi-Regular.otf";
        }
        .data-value {
          font-size: 30px;
          color: #e4be6a;
          font-family: "DIN-Condensed-Bold-2.ttf";
          text-shadow: 0px 5px 8px #075068;
        }
      }
    }
    .panel-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      .item-data {
        padding-left: 12px;
        height: 400px;
        overflow-y: auto;
        box-sizing: border-box;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .img-type {
          cursor: pointer;
          position: relative;
          height: 10%;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
          }
          .filter {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 158, 0, 0.5); /* 淡黄色 */
            pointer-events: none; /* 使滤镜不阻止鼠标事件 */
            z-index: 0;
          }
          .data-row {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 60px;
            padding-right: 10px;
            .type-lable {
              font-size: 16px;
              color: #c8f1ff;
              font-family: "Alibaba-PuHuiTi-Regular.otf";
            }
            .type-value {
              font-size: 30px;
              color: #ffffff;
              font-family: "DIN-Condensed-Bold-2.ttf";
            }
          }
        }
        & > .img-type:last-child {
          margin: 0;
        }
      }
      .item-state {
        flex: 1;
        padding-left: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .state-type {
          position: relative;
          height: 110px;
          width: 95px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          .type-value {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #c8f1ff;
            font-family: "DIN-Condensed-Bold-2.ttf";
          }
          .type-lable {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #c8f1ff;
            font-family: "Alibaba-PuHuiTi-Regular.otf";
          }
          .state0 {
            background: linear-gradient(0deg, #ffb992 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .state1 {
            background: linear-gradient(0deg, #19ffc6 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .state2 {
            background: linear-gradient(0deg, #d761fe 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
        & > .state-type:nth-child(2) {
          // top: -60);
        }
      }
    }
    .value-unit {
      // margin-left: );
      font-size: 16px;
      color: #ffffff;
      opacity: 0.5;
    }
  }
}

.activeType {
  .filter {
    display: block !important;
  }
  .type-lable {
    color: #ffffff !important;
  }
  .type-value {
    color: #ff9e00 !important;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background-color: #016fbb; /* 设置滚动条滑块的颜色 */
}
</style>