CaiYuanYiTiHua/src/views/map/dataScreen/index.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="map" @click="mapClick"></div>
    <div class="data-screen">
      <div class="basic-data">
        <div class="title">基本数据</div>
        <div class="show-quantity-div">
          <div class="number-1 show-span-div">
            <div class="show-quantity">
              <div class="sub-title">企业总数</div>
              <div class="show-number">3157</div>
            </div>
          </div>
          <div class="number-2 show-span-div">
            <div class="show-quantity">
              <div class="sub-title">测算土地面积</div>
              <div class="show-number">6360<span class="suffix">㎡</span></div>
            </div>
          </div>
          <div class="number-3 show-span-div">
            <div class="show-quantity">
              <div class="sub-title">测算房产面积</div>
              <div class="show-number">3157<span class="suffix">㎡</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="enterprise-area">
        <div class="title">企业占地面积分乡镇情况</div>
        <div class="enterprise-area-bar"></div>
      </div>
      <div class="enterprise-income">
        <div class="title">企业收入分镇情况</div>
        <div class="enterprise-income-bar"></div>
      </div>
      <div class="area-pie-div">
        <div class="title">企业占地面积（土地、房产）</div>
        <div class="area-pie">
          <div class="land-area">
            <div class="pie-title">土地面积占比</div>
            <div class="land-area-pie"></div>
          </div>
          <div class="real-estate-area">
            <div class="pie-title">房产面积占比</div>
            <div class="real-estate-area-pie"></div>
          </div>
        </div>
      </div>
      <div class="pack-up"></div>
    </div>
    <div class="search-div">
      <a-input-search
        class="search-input"
        v-model:value="value"
        placeholder="请输入企业名称/法人/地址搜索"
        size="large"
        @search="onSearch"
      >
        <template #enterButton>
          <a-button class="search-button" type="primary" :icon="h(SearchOutlined)">搜索</a-button>
        </template>
      </a-input-search>
      <div class="show-search-list">
        <div class="show-search-title"></div>
        <div class="show-search-content">
          <div class="show-search-item" v-for="(item, index) in searchList" :key="index">
            <div style="width: 100%; color: #d3f1ff">
              <div style="display: flex; justify-content: space-between; margin-bottom: 8px">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-person-name">{{ item.personName }}</div>
              </div>
              <div class="item-address"
                ><img :src="'dataScreen/address.svg'" style="margin-right: 10px" />{{
                  item.address
                }}</div
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="show-enterprise-info" :style="`top:${infoPosition.top};left:${infoPosition.left}`">
      <div class="title-div">
        <div class="title-span">隆兴板材厂A</div>
        <div class="title-close-button"><img :src="'dataScreen/info-close.svg'" /></div>
      </div>
      <div v-for="(item, index) in enterpriseInfo" :key="index" class="show-info-item">
        <div class="first-span">{{ item.title }}</div>
        <div class="last-span">{{ showEnterpriseInfoData[item.key] }}</div>
      </div>
      <div class="show-image">图片</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts';
  import { onMounted, ref, h, onBeforeUnmount } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { enterpriseInfo } from './util';

  const mapClick = (event) => {
    let left = 0;
    let top = 0;
    // console.log(event.x,event.offsetX,event.offsetX + 265,window.innerWidth)
    if (event.x + 265 > window.innerWidth) {
      left = event.offsetX - (event.x + 265 - window.innerWidth);
    } else {
      left = event.offsetX;
    }
    if (event.y + 322 > window.innerHeight) {
      top = event.offsetY - (event.y + 322 - window.innerHeight);
    } else {
      top = event.offsetY;
    }
    infoPosition.value = {
      left: left + 'px',
      top: top + 'px',
    };
  };
  const infoPosition = ref({
    left: '50%',
    top: '50%',
  });
  let enterpriseAreaBarChartOption = {
    xAxis: {
      type: 'category',
      data: [
        '上冶镇',
        '薛庄镇',
        '探沂镇',
        '朱田镇',
        '梁邱镇',
        '新庄镇',
        '马庄镇',
        '胡阳镇',
        '石井镇',
        '东蒙镇',
      ],
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: '#D0DEEE',
      },
    },
    yAxis: [
      {
        type: 'value',
        show: false,
      },
    ],
    series: [
      {
        name: '土地面积',
        type: 'bar',
        showBackground: true,
        barGap: '0%',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(102, 225, 223, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(102, 225, 223, 0.5)',
              },
              {
                offset: 1,
                color: 'rgba(102, 225, 223, 0)',
              },
            ],
          },
        },
        data: [18203, 23489, 29034, 104970, 131744, 630230, 104860, 29034, 104970, 131744],
      },
      {
        name: '房产面积',
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 183, 66, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(255, 183, 66, 0.5)',
              },
              {
                offset: 1,
                color: 'rgba(255, 183, 66, 0)',
              },
            ],
          },
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807, 9034, 104970, 131744, 630230],
      },
    ],
    grid: {
      top: '20%',
      left: '0%',
      right: '0%',
      bottom: '17%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#D0DEEE',
        fontSize: 12,
      },
    },
  };
  let enterpriseIncomeBarChartOption = {
    xAxis: {
      type: 'category',
      data: [
        '上冶镇',
        '薛庄镇',
        '探沂镇',
        '朱田镇',
        '梁邱镇',
        '新庄镇',
        '马庄镇',
        '胡阳镇',
        '石井镇',
        '东蒙镇',
      ],
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: '#D0DEEE',
      },
    },
    yAxis: [
      {
        type: 'value',
        show: false,
      },
    ],
    series: [
      {
        name: '测算收入',
        type: 'bar',
        showBackground: true,
        barGap: '0%',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(52, 220, 254, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(52, 220, 254, 0.5)',
              },
              {
                offset: 1,
                color: 'rgba(52, 220, 254, 0)',
              },
            ],
          },
          borderRadius: [8, 8, 0, 0],
        },
        data: [18203, 23489, 29034, 104970, 131744, 630230, 104860, 29034, 104970, 131744],
      },
      {
        name: '实缴收入',
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)',
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(84, 107, 255, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(84, 107, 255, 0.5)',
              },
              {
                offset: 1,
                color: 'rgba(84, 107, 255, 0)',
              },
            ],
          },
          borderRadius: [8, 8, 0, 0],
        },
        data: [19325, 23438, 31000, 121594, 134141, 681807, 9034, 104970, 131744, 630230],
      },
    ],
    grid: {
      top: '20%',
      left: '0%',
      right: '0%',
      bottom: '17%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#D0DEEE',
        fontSize: 12,
      },
    },
  };
  let landAreaPieChartOption = {
    legend: {
      orient: 'vertical',
      right: 'right',
      data: ['≥40亩', '30-40亩', '20-30亩', '10-20亩', '0-10亩'],
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
      itemWidth: 6,
      itemHeight: 6,
    },
    series: [
      {
        right: '30%',
        type: 'pie',
        radius: ['30%', '85%'],
        label: {
          show: true,
          position: 'inner',
          color: '#fff',
        },
        data: [
          { value: 1048, name: '≥40亩', itemStyle: { color: '#12CEFF' } },
          { value: 735, name: '30-40亩', itemStyle: { color: '#FFBD00' } },
          { value: 580, name: '20-30亩', itemStyle: { color: '#1257FF' } },
          { value: 484, name: '10-20亩', itemStyle: { color: '#73D85A' } },
          { value: 300, name: '0-10亩', itemStyle: { color: '#161BF6' } },
        ],
      },
    ],
  };
  let realEstateAreaPieChartOption = {
    legend: {
      orient: 'vertical',
      right: 'right',
      data: ['≥100㎡', '80-100㎡', '50-80㎡', '20-50㎡', '0-20㎡'],
      textStyle: {
        color: '#fff',
        fontSize: 10,
      },
      itemWidth: 6,
      itemHeight: 6,
    },
    series: [
      {
        right: '30%',
        type: 'pie',
        radius: ['30%', '85%'],
        label: {
          show: true,
          position: 'inner',
          color: '#fff',
        },
        data: [
          { value: 1048, name: '≥100㎡', itemStyle: { color: '#04C7FF' } },
          { value: 735, name: '80-100㎡', itemStyle: { color: '#FF12CE' } },
          { value: 580, name: '50-80㎡', itemStyle: { color: '#FF6700' } },
          { value: 484, name: '20-50㎡', itemStyle: { color: '#161BF6' } },
          { value: 300, name: '0-20㎡', itemStyle: { color: '#5202FF' } },
        ],
      },
    ],
  };
  let enterpriseAreaBarChart = {};
  let enterpriseIncomeBarChart = {};
  let landAreaPieChart = {};
  let realEstateAreaPieChart = {};
  onMounted(() => {
    let enterpriseAreaBarDom = document.getElementsByClassName('enterprise-area-bar')[0];
    let enterpriseIncomeBarDom = document.getElementsByClassName('enterprise-income-bar')[0];
    let landAreaPieDom = document.getElementsByClassName('land-area-pie')[0];
    let realEstateAreaPieDom = document.getElementsByClassName('real-estate-area-pie')[0];

    enterpriseAreaBarChart = echarts.init(enterpriseAreaBarDom);
    enterpriseIncomeBarChart = echarts.init(enterpriseIncomeBarDom);
    landAreaPieChart = echarts.init(landAreaPieDom);
    realEstateAreaPieChart = echarts.init(realEstateAreaPieDom);

    enterpriseAreaBarChart.setOption(enterpriseAreaBarChartOption);
    enterpriseIncomeBarChart.setOption(enterpriseIncomeBarChartOption);
    landAreaPieChart.setOption(landAreaPieChartOption);
    realEstateAreaPieChart.setOption(realEstateAreaPieChartOption);
  });
  onBeforeUnmount(() => {
    // 及时销毁
    enterpriseAreaBarChart.dispose();
    enterpriseIncomeBarChart.dispose();
    landAreaPieChart.dispose();
    realEstateAreaPieChart.dispose();
    console.log('onBeforeUnmount>>>');
  });
  const value = ref('');
  const showEnterpriseInfoData = ref({
    legalPerson: '刘明',
    phone: '15056888888',
    realEstateArea: '500m²',
    landArea: '1500m²',
    type: '板材加工',
    address: '和平路与文山路交汇处200米以北',
    surveySheet: '测绘表 （企业确认文件）',
  });
  const searchList = ref([
    { name: '隆兴板材厂A', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
    { name: '隆兴板材厂B', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
    { name: '隆兴板材厂C', personName: '刘明', address: '临沂市费县探沂镇209国道石行村' },
  ]);
</script>

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 100%;
    background-color: #4e7243;
  }
  .data-screen {
    height: 100%;
    width: 466px;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 25px;
    padding-left: 19px;
    padding-right: 29px;
    .title {
      width: 100%;
      height: 44px;
      background: url(/dataScreen/title.png) no-repeat;
      font-size: 18px;
      color: #fff;
      display: flex;
      align-items: center;
      padding-left: 32px;
    }
    .show-quantity-div {
      padding-top: 16px;
      padding-bottom: 16px;
      display: flex;
      justify-content: space-between;
      .show-span-div {
        display: flex;
        align-items: center;
        padding-left: 50px;
        .sub-title {
          font-size: 10px;
          color: #fff;
        }
        .show-number {
          font-size: 18px;
          font-weight: normal;
          color: #17b0cc;
          .suffix {
            font-size: 12px;
          }
        }
      }
      .number-1 {
        width: 129px;
        height: 55px;
        background: url(/dataScreen/number1.png) no-repeat;
      }
      .number-2 {
        width: 129px;
        height: 55px;
        background: url(/dataScreen/number2.png) no-repeat;
      }
      .number-3 {
        width: 129px;
        height: 55px;
        background: url(/dataScreen/number3.png) no-repeat;
      }
    }
    .enterprise-area {
      .enterprise-area-bar {
        width: 100%;
        height: 193px;
      }
    }
    .enterprise-income {
      .enterprise-income-bar {
        width: 100%;
        height: 193px;
      }
    }
    .area-pie-div {
      .area-pie {
        display: flex;
        margin-top: 7px;
        .land-area {
          flex: 1;
          .land-area-pie {
            height: 165px;
          }
        }
        .real-estate-area {
          flex: 1;
          .real-estate-area-pie {
            height: 165px;
          }
        }
      }
      .pie-title {
        width: 108px;
        height: 27px;
        background: url(/dataScreen/pie-title.png) no-repeat;
        font-size: 14px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .pack-up {
      width: 34px;
      height: 130px;
      background: url(/dataScreen/pack-up.png) no-repeat;
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(100%, -50%);
    }
  }
  .search-div {
    width: 370px;
    height: 47px;
    position: absolute;
    top: 30px;
    left: calc(466px + 50px);
    .show-search-list {
      position: absolute;
      top: 47px;
      width: 100%;
      height: 280px;
      background: #032567;
      .show-search-title {
        width: 100%;
        height: 5px;
        background: #0542b7;
      }
      .show-search-content {
        width: 100%;
        height: 275px;
        overflow: auto;
        padding-left: 16px;
        padding-right: 16px;
        .show-search-item {
          width: 100%;
          height: 64px;
          border-bottom: 1px dashed #90a1b0;
          display: flex;
          align-items: center;
          .item-name {
            font-size: 16px;
          }
          .item-person-name {
            font-size: 14px;
          }
          .item-address {
            font-size: 12px;
            opacity: 0.56;
          }
        }
      }
    }
  }
  .show-enterprise-info {
    position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    width: 265px;
    min-height: 307px;
    background: url(/dataScreen/show-enterprise-info.png) no-repeat;
    background-size: 100% 100%;
    padding: 13px 20px 20px 16px;
    .title-div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 22px;
      .title-span {
        font-size: 16px;
        color: #fff;
      }
    }
    .show-info-item {
      display: flex;
      font-size: 12px;
      height: 25px;
      align-items: center;
      .first-span {
        color: #a6e4f7;
        margin-right: 12px;
      }
      .first-span::before {
        content: '';
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #fff;
        display: inline-block;
        margin-left: 2px;
        margin-right: 7px;
      }
      .last-span {
        color: #fff;
      }
    }
    .show-info-item:nth-last-child(2) {
      margin-bottom: 5px;
    }
    .show-image {
      width: 119px;
      height: 69px;
      background: #2473d5;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      opacity: 0.2;
    }
  }
</style>
<style lang="scss">
  .search-div {
    .search-input {
      input::placeholder {
        color: rgba(255, 255, 255, 0.63);
      }
      input {
        background-color: #121c2d;
        border: 1px solid #103a84;
        color: rgba(255, 255, 255, 0.63);
        border-radius: 20px;
      }
      button.css-dev-only-do-not-override-n9spb6.ant-btn.ant-btn-primary.ant-btn-lg.search-button.ant-input-search-button {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #0a44ad;
      }
    }
  }
</style>