zfire-newmall-admin/src/views/bigViews/dataView2/index.vue

<template>
  <div class="thermal-map">
    <div class="modviewdingwei">
      <div class="dadetitle">
        {{ shangjiquyu === '全部' ? '广佛6市' : shangjiquyu }}未完工单量
      </div>
      <div class="modview">
        <moduleEnclosure>
          <div style="width: 100%; height: 100%">
            <div class="mintitle">安装未完工单量</div>
            <div class="minnum">{{ huizong.totalInsOpen || 0 }}</div>
          </div>
        </moduleEnclosure>
      </div>
      <div class="modview">
        <moduleEnclosure>
          <div style="width: 100%; height: 100%">
            <div class="mintitle">安装未完工台数</div>
            <div class="minnum">{{ huizong.totalInsMacOpen || 0 }}</div>
          </div>
        </moduleEnclosure>
      </div>
      <div class="modview">
        <moduleEnclosure>
          <div style="width: 100%; height: 100%">
            <div class="mintitle">维修未完工单量</div>
            <div class="minnum">{{ huizong.totalRepOpen || 0 }}</div>
          </div>
        </moduleEnclosure>
      </div>
      <div class="modview">
        <moduleEnclosure>
          <div style="width: 100%; height: 100%">
            <div class="mintitle">清洗未完工单量</div>
            <div class="minnum">{{ huizong.totalRepOpenqx || 0 }}</div>
          </div>
        </moduleEnclosure>
      </div>
    </div>
    <div class="youxiajiao">
      <div
        class="csmodview"
        v-for="(name, index) in cityList"
        :key="index"
        @click="getareaList(name)"
      >
        <moduleEnclosure>
          <div style="width: 100%; height: 100%">
            <div :class="{ csmintitle: true, selectxz: cityName === name }">
              {{ name }}
            </div>
          </div>
        </moduleEnclosure>
      </div>
    </div>
    <div class="xiaodiqu" v-if="quyulist.length" @wheel.stop="() => {}">
      <div
        v-for="(item, index) in quyulist"
        :key="index"
        :class="{ xiaomingz: true, selectxz: areaName === item.areaName }"
        @click="getareaName(item)"
      >
        {{ item.areaName }}
      </div>
    </div>
    <div class="relitumap">
      <mapdata v-if="showMapv2" :shangjiquyu="shangjiquyu" :type="type" />
    </div>
    <img src="@/assets/shuoming.png" class="shuoming" />
  </div>
</template>

<script>
import moduleEnclosure from '@/components/moduleEnclosure.vue';
import mapdata from './components/mapdata.vue';
import { areaList, query24 } from '@/api/bigView.js';
import bus from '@/utils/eventBus.js';
export default {
  components: { moduleEnclosure, mapdata },
  data() {
    return {
      showMapv2: false,
      cityName: '全部',
      areaName: '',
      shangjiquyu: '全部',
      type: -1,
      cityList: [
        '全部',
        '广州市',
        '清远市',
        '韶关市',
        '佛山市',
        '肇庆市',
        '云浮市',
      ],
      quyulist: [],
      huizong: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.showMapv2 = true;
    });
    query24().then((res) => {
      this.huizong = res.data;
    });
  },
  watch: {
    shangjiquyu() {
      if (this.shangjiquyu === '全部') {
        bus.emit('autoplay', true);
      } else {
        bus.emit('autoplay', false);
      }
      this.showMapv2 = false;
      this.$nextTick(() => {
        this.showMapv2 = true;
      });
      if (this.type > -1) {
        query24({
          params: {
            [['city', 'area'][this.type]]: this.shangjiquyu,
          },
        }).then((res) => {
          this.huizong = res.data;
        });
      } else {
        query24().then((res) => {
          this.huizong = res.data;
        });
      }
    },
  },
  beforeUnmount() {},
  methods: {
    getareaList(name) {
      this.cityName = name;
      this.shangjiquyu = name;
      this.areaName = '';
      this.type = 0;
      if (name !== '全部') {
        areaList({
          params: {
            city: name,
          },
        }).then((res) => {
          this.quyulist = res.data;
        });
      } else {
        this.type = -1;
        this.quyulist = [];
      }
    },
    getareaName(item) {
      this.type = 1;
      this.areaName = item.areaName;
      this.shangjiquyu = item.areaName;
    },
  },
};
</script>

<style scoped lang="scss">
.thermal-map {
  width: 100%;
  height: 100%;
  position: relative;
}
.modviewdingwei {
  position: absolute;
  left: 64px;
  top: 28px;
  z-index: 10;
}
.modview {
  width: 188px;
  height: 86px;
  margin-top: 16px;
}
.mintitle {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #7cf8fd;
}
.dadetitle {
  width: auto;
  font-size: 22px;
  font-weight: 400;
  text-align: left;
  color: #9cbde1;
  white-space: nowrap;
}
.minnum {
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  color: #ecfdff;
}
.csmodview {
  width: 120px;
  height: 60px;
  margin-top: 10px;
}
.csmintitle {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  color: #f1f6fe;
}
.youxiajiao {
  position: absolute;
  bottom: 60px;
  right: 60px;
  z-index: 10;
}
.relitumap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
}
.xiaodiqu {
  width: 165px;
  height: 480px;
  background: rgba(106, 207, 210, 0.32);
  border: 1px solid #7cf8fd;
  position: absolute;
  bottom: 60px;
  right: 200px;
  z-index: 10;
  box-sizing: border-box;
  padding: 16px;
  overflow-y: auto;
  text-align: center;
}
.xiaomingz {
  width: 100%;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  color: #f1f6fe;
  line-height: 30px;
  margin-bottom: 20px;
}
.selectxz {
  color: #6ad3dd !important;
  text-decoration: underline !important;
}
.shuoming {
  width: 132px;
  height: 72px;
  position: absolute;
  left: 64px;
  bottom: 40px;
}
</style>