tenant-Platform/src/views/index.vue

<route lang="yaml">
name: home
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script setup lang="ts">
import * as echarts from 'echarts'
import api from '@/api'

import { useRouter } from 'vue-router'

import up from '@/assets/images/home/up.png'
import down from '@/assets/images/home/down.png'
import cxcd from '@/assets/images/home/cxcd.png'
import bldd from '@/assets/images/home/bldd.png'
import ddcx from '@/assets/images/home/ddcx.png'
import xygl from '@/assets/images/home/xygl.png'
import fygl from '@/assets/images/home/fygl.png'
import bxgs from '@/assets/images/home/bxgs.png'
import bxgszh from '@/assets/images/home/bxgszh.png'
import ywygl from '@/assets/images/home/ywygl.png'

import chinaMap from '@/assets/json/china.json'

echarts.registerMap('china', chinaMap)

const provinceMapLoaders: Record<string, () => Promise<any>> = {
  '安徽': () => import('@/assets/json/anhui.json'),
  '澳门': () => import('@/assets/json/aomen.json'),
  '北京': () => import('@/assets/json/beijing.json'),
  '重庆': () => import('@/assets/json/chongqing.json'),
  '福建': () => import('@/assets/json/fujian.json'),
  '甘肃': () => import('@/assets/json/gansu.json'),
  '广东': () => import('@/assets/json/guangdong.json'),
  '广西': () => import('@/assets/json/guangxi.json'),
  '贵州': () => import('@/assets/json/guizhou.json'),
  '海南': () => import('@/assets/json/hainan.json'),
  '河北': () => import('@/assets/json/hebei.json'),
  '黑龙江': () => import('@/assets/json/heilongjiang.json'),
  '河南': () => import('@/assets/json/henan.json'),
  '湖北': () => import('@/assets/json/hubei.json'),
  '湖南': () => import('@/assets/json/hunan.json'),
  '江苏': () => import('@/assets/json/jiangsu.json'),
  '江西': () => import('@/assets/json/jiangxi.json'),
  '吉林': () => import('@/assets/json/jilin.json'),
  '辽宁': () => import('@/assets/json/liaoning.json'),
  '内蒙': () => import('@/assets/json/neimenggu.json'),
  '宁夏': () => import('@/assets/json/ningxia.json'),
  '青海': () => import('@/assets/json/qinghai.json'),
  '山东': () => import('@/assets/json/shandong.json'),
  '上海': () => import('@/assets/json/shanghai.json'),
  '山西': () => import('@/assets/json/shanxi.json'),
  '陕西': () => import('@/assets/json/shanxi1.json'),
  '四川': () => import('@/assets/json/sichuan.json'),
  '天津': () => import('@/assets/json/tianjin.json'),
  '香港': () => import('@/assets/json/xianggang.json'),
  '新疆': () => import('@/assets/json/xinjiang.json'),
  '西藏': () => import('@/assets/json/xizang.json'),
  '云南': () => import('@/assets/json/yunnan.json'),
  '浙江': () => import('@/assets/json/zhejiang.json'),
}

const loadedProvinceMaps = new Set<string>()

async function loadProvinceMap(name: string): Promise<boolean> {
  if (loadedProvinceMaps.has(name)) return true
  const loader = provinceMapLoaders[name]
  if (!loader) return false
  const module = await loader()
  echarts.registerMap(name, module.default)
  loadedProvinceMaps.add(name)
  return true
}

let myRouter = useRouter()

// 地图
let ChinaMap = ref()
const initChinaMap = () => {
  const myChart = echarts.init(ChinaMap.value)
  let option = {
    tooltip: {
      formatter: function (e, t, n) {
        // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
        return e.name + "<br />" +
          "业务员数量：" + e.value + "<br />" +
          "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
          "渠道业务员数量：" + e.data.channelSalesmanCount
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 26,
      bottom: 40,
      showLabel: !0,
      text: ["高", "低"],
      pieces: [{
        gt: 150,
        label: ">150",
        color: "#0485FF"
      }, {
        gte: 100,
        lte: 150,
        label: "100-150",
        color: "#2E9AFF"
      }, {
        gte: 50,
        lt: 100,
        label: "50-100",
        color: "#81C2FF"
      }, {
        gt: 0,
        lt: 50,
        label: "<50",
        color: "#BCDFFF"
      }, {
        value: 0,
        color: "#DCEEFF"
      }],
      show: !0
    },
    geo: {
      map: "china",
      roam: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1.23,
      top: 120,
      label: {
        normal: {
          show: false,
          fontSize: "14",
          color: "rgba(0,0,0,0.7)"
        }
      },
      itemStyle: {
        normal: {
          //shadowBlur: 50,
          //shadowColor: 'rgba(0, 0, 0, 0.2)',
          borderColor: "rgba(0, 0, 0, 0.2)"
        },
        emphasis: {
          areaColor: "#f2d5ad",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      }
    },
    series: [{
      name: "",
      type: "map",
      geoIndex: 0,
      data: chinaMapData.value
    }]
  };
  myChart.setOption(option)
  myChart.on('click', function (a) {
    console.log(a)
    if (a.data.code) {
      provinceStr.value = a.data.code
      provinceName.value = a.data.name
      initBusinessDistribution()
    }
  })
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 市级地图
let CityMap = ref()
const initCityMap = async (name) => {
  console.log(name)
  let str = ''
  if (name.length == 3) {
    str = name.substring(0, 2)
    await initMap(str)
  } else if (name.length == 4) {
    str = name.substring(0, 3)
    await initMap(str)
  } else if (name.length > 4) {
    str = name.substring(0, 2)
    await initMap(str)
  }
}

const initMap = async (str) => {
  console.log(str)
  const loaded = await loadProvinceMap(str)
  if (!loaded) return
  const myChart = echarts.init(CityMap.value)
  let option = {
    tooltip: {
      formatter: function (e, t, n) {
        // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
        return e.name + "<br />" +
          "业务员数量2：" + e.value + "<br />" +
          "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
          "渠道业务员数量：" + e.data.channelSalesmanCount
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      left: 26,
      bottom: 40,
      showLabel: !0,
      text: ["高", "低"],
      pieces: [{
        gt: 150,
        label: ">150",
        color: "#0485FF"
      }, {
        gte: 100,
        lte: 150,
        label: "100-150",
        color: "#2E9AFF"
      }, {
        gte: 50,
        lt: 100,
        label: "50-100",
        color: "#81C2FF"
      }, {
        gt: 0,
        lt: 50,
        label: "<50",
        color: "#BCDFFF"
      }, {
        value: 0,
        color: "#DCEEFF"
      }],
      show: !0
    },
    geo: {
      map: str,
      roam: !1,
      scaleLimit: {
        min: 1,
        max: 2
      },
      zoom: 1,
      top: 30,
      label: {
        normal: {
          show: true,
          fontSize: "14",
          color: "rgba(0,0,0,0.7)"
        }
      },
      itemStyle: {
        normal: {
          //shadowBlur: 50,
          //shadowColor: 'rgba(0, 0, 0, 0.2)',
          borderColor: "rgba(0, 0, 0, 0.2)"
        },
        emphasis: {
          areaColor: "#f2d5ad",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          borderWidth: 0
        }
      }
    },
    series: [{
      name: "",
      type: "map",
      geoIndex: 0,
      data: subMapData.value
    }]
  };
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 出单趋势
let TrendRef = ref()
const initTrend = () => {
  const myChart = echarts.init(TrendRef.value)
  let option = {
    grid: {
      left: '20',
      right: '20',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      show: true,
      right: '10',
      top: '10',
      icon: 'stack',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#333333'
      },
      data: ['订单数', '保费']
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: '#666666'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#999999'
          }
        },
        axisTick: {
          show: false,
        },
        data: orderTrend.value.xAxis
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '信息量',
        min: 0,
        max: 100000,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#666666'
          }
        },
        axisTick: {
          show: false,
        }
      }
    ],
    series: [
      {
        name: '订单数',
        type: 'line',
        stack: '总量',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#15EB87',
            lineStyle: {
              color: "#15EB87",
              width: 1
            },
            areaStyle: {
              //color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(21,235,135,0.3)'
              }, {
                offset: 1,
                color: 'rgba(21,235,135,0.1)'
              }]),
            }
          }
        },
        markPoint: {
          itemStyle: {
            normal: {
              color: 'red'
            }
          }
        },
        data: orderTrend.value.orderCount
      },
      {
        name: '保费',
        type: 'line',
        stack: '总量',
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: '#14D5E1',
            lineStyle: {
              color: "#14D5E1",
              width: 1
            },
            areaStyle: {
              //color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(20,213,225,0.3)'
              }, {
                offset: 1,
                color: 'rgba(20,213,225,0.1)'
              }]),
            }
          }
        },
        data: orderTrend.value.premium
      }
    ]
  };
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 业务漏斗
let FunnelRef = ref()
const initFunnel = () => {
  const myChart = echarts.init(FunnelRef.value)
  let colors = ['#20c8ff', '#2cb7ff', '#1785ef'];
  let option = {
    backgroundColor: '#ffffff',
    color: colors,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "red"
        },
        lineStyle: {
          color: "#9eb2cb"
        }
      }
    },

    legend: {
      show: false,
      top: "top",
      left: "2%",
      textStyle: {
        color: "#000"
      },
      itemHeight: 2,
      data: ['报价订单', '核保订单', '承保订单']
    },
    grid: {
      top: 24,
      left: "2%",
      right: 20,
      bottom: 30,
      containLabel: true,
      borderWidth: 0.5
    },
    series: [
      {
        top: 40,
        type: 'funnel',
        left: '10%',
        width: '50%',
        bottom: 0,
        gap: 16,
        minSize: 150,
        maxSize: 250,
        label: {
          show: true,
          color: '#ffffff',
          position: 'inside',
          formatter: '{c}%'
        },
        data: businessFunnelRadio.value
      },
      {
        top: 40,
        type: 'funnel',
        left: '10%',
        width: '50%',
        gap: 16,
        bottom: 0,
        z: 1,
        minSize: 150,
        maxSize: 150,
        label: {
          normal: {
            color: '#333333',
            position: 'right',
            formatter: '{b}{c}'
          },
        },
        //右侧的百分比显示的地方
        labelLine: {
          show: true,
          normal: {
            length: 200,
            position: 'right',
            lineStyle: {
              width: 1,
              color: '#999999',
              type: 'solid'
            },
          },
        },
        //主体是透明的
        itemStyle: {
          normal: {
            color: 'transparent',
            borderWidth: 0,
            opacity: 1
          }
        },
        data: businessFunnel.value
      }
    ]
  };
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 业务类型分布
let PieRef = ref()
const initPie = () => {
  const myChart = echarts.init(PieRef.value)
  let option = {
    legend: {
      top: 'bottom'
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [40, 100],
        center: ['50%', '50%'],
        roseType: 'area',
        color: ["#3BD5DC", "#26A8FF", "#FFC61B"],
        data: distributionData.value,
        label: {
          show: true,
          formatter: '{b}{c}%'
        }
      }
    ]
  };
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

// 今日数据
let dailyData = ref({
  insuranceIssuersCount: '',
  insuranceIssuersCountChange: '',
  orderQuantity: '',
  orderQuantityChange: '',
  premium: '',
  premiumChange: '',
  quoteCount: '',
  quoteCountChange: ''
})
const initDailyData = () => {
  api.homeApi.dailyData().then((res: any) => {
    if (res.code == 200) {
      dailyData.value = res.data
    } else {
      dailyData.value = {
        insuranceIssuersCount: '',
        insuranceIssuersCountChange: '',
        orderQuantity: '',
        orderQuantityChange: '',
        premium: '',
        premiumChange: '',
        quoteCount: '',
        quoteCountChange: ''
      }
    }
  })
}


let orderTrend = ref({
  xAxis: [],
  orderCount: [],
  premium: []
})
const initOrderTrend = () => {
  api.homeApi.orderTrend().then((res: any) => {
    if (res.code == 200) {
      res.data?.forEach(item => {
        orderTrend.value.xAxis.push(`${item.month}月`)
        orderTrend.value.orderCount.push(item.orderCount)
        orderTrend.value.premium.push(item.premium)
      })
    } else {
      orderTrend.value = {
        xAxis: [],
        orderCount: [],
        premium: []
      }
    }
    initTrend()
  })
}

let businessFunnel = ref([])
let businessFunnelRadio = ref([])
const initBusinessFunnel = () => {
  api.homeApi.businessFunnel().then((res: any) => {
    if (res.code == 200) {
      businessFunnel.value = [
        {
          value: res.data.quoteCount,
          name: '报价订单'
        }, {
          value: res.data.underwriteCount,
          name: '核保订单'
        }, {
          value: res.data.orderCount,
          name: '承保订单'
        },
      ]
      businessFunnelRadio.value = [
        {
          value: res.data.quoteToUnderwriteRatio,
          name: '报价订单'
        }, {
          value: res.data.underwriteToOrderRatio,
          name: '核保订单'
        }, {
          value: res.data.quoteToOrderRatio,
          name: '承保订单'
        },
      ]
    } else {
      businessFunnel.value = []
      businessFunnelRadio.value = []
    }
    initFunnel();
  })
}

let distributionData = ref([])
const initDistribution = () => {
  api.homeApi.distribution().then((res: any) => {
    if (res.code == 200) {
      distributionData.value = [
        {
          name: '交强险',
          value: res.data.ciProportion || 0
        }, {
          name: '商业险',
          value: res.data.biProportion || 0
        }, {
          name: '驾意险',
          value: res.data.niProportion || 0
        },
      ]
    } else {
      distributionData.value = []
    }
    initPie()
  })
}

let chinaMapData = ref([])
let subMapData = ref([])
let provinceStr = ref('')
let provinceName = ref('')
const initBusinessDistribution = async () => {
  console.log(provinceStr.value)
  api.homeApi.businessDistribution(provinceStr.value).then(async (res: any) => {
    if (!provinceStr.value) {
      if (res.code == 200) {
        chinaMapData.value = res.data?.map(item => {
          return {
            name: item.areaCname,
            code: item.areaCode,
            value: item.totalSalesmanCount,
            personalAgentCount: item.personalAgentCount,
            channelSalesmanCount: item.channelSalesmanCount
          }
        })
      } else {
        chinaMapData.value = []
      }
      initChinaMap()
    } else {
      if (res.code == 200) {
        subMapData.value = res.data?.map(item => {
          return {
            name: item.areaCname,
            code: item.areaCode,
            value: item.totalSalesmanCount,
            personalAgentCount: item.personalAgentCount,
            channelSalesmanCount: item.channelSalesmanCount
          }
        })
      } else {
        subMapData.value = []
      }
      await initCityMap(provinceName.value)
    }
  })
}

let functionsList = ref([])
const initCommonFunctions = () => {
  api.homeApi.commonFunctions().then((res: any) => {
    if (res.code == 200) {
      functionsList.value = res.data
    } else {
      functionsList.value = []
    }
  })
}

let newsList = ref([])
const getNewList = () => {
  api.homeApi.messageList({
    type: "2",
    pages: 1,
    size: 25
  }).then((res: any) => {
    if (res.code == 200) {
      newsList.value = res.data.records
    }
  })
}
const handleRouterChange = (item, index) => {
  myRouter.push({
    name: item.name,
  })
}
let downloadUrl = ref('')// app二维码
let appPath = ref('')// app最新版本下载地址
// 获取app最新版本下载地址
const initAppLatestVersion = () => {
  return new Promise((resolve) => {
    api.appApi.appLatestVersion({
      appid: "__UNI__05D695B",
      packageType: "apk",
    }).then((res: any) => {
      if (res.code == 200) {
        appPath.value = res.data.path  // 使用实际的下载路径
      } else {
        appPath.value = ''
      }
      resolve(true)
    }).catch(() => {
      appPath.value = ''
      resolve(false)
    })
  })
}

onMounted(async () => {
  let userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if (userInfo?.province) {
    await initCityMap(userInfo?.province);
  }
  initDailyData();
  getNewList();
  initOrderTrend();
  initBusinessFunnel();
  initDistribution();
  initBusinessDistribution();
  initCommonFunctions();
  await initAppLatestVersion();
  // initChinaMap();
  // initTrend();
  // initFunnel();
  // initPie();
  const QRCode = (await import('qrcode')).default
  await QRCode.toDataURL(appPath.value, {
    width: 116,
    height: 116,
  }).then((url: string) => {
    downloadUrl.value = url
  }).catch((err: any) => {
    console.log(err)
  })

})

</script>

<template>
  <div class="container111">
    <div class="w-full left-section">
      <PageMain class="ecology">
        <div class="title">今日数据</div>
        <div class="dataList">
          <div class="item">
            <div class="name">
              今日保费(万元)
            </div>
            <div class="data">
              <span class="number">
                {{ dailyData.premium }}
              </span>
              <span class="line">
                较昨日<img :src="dailyData.premiumChange > 0 ? up : down" />{{ dailyData.premiumChange || 0 }}%
              </span>
            </div>
          </div>
          <div class="item">
            <div class="name">
              今日承保订单数(笔)
            </div>
            <div class="data">
              <span class="number">
                {{ dailyData.orderQuantity }}
              </span>
              <span class="line">
                较昨日<img :src="dailyData.orderQuantityChange > 0 ? up : down" />{{ dailyData.orderQuantityChange || 0 }}%
              </span>
            </div>
          </div>
          <div class="item">
            <div class="name">
              今日出单业务员(人)
            </div>
            <div class="data">
              <span class="number">
                {{ dailyData.insuranceIssuersCount }}
              </span>
              <span class="line">
                较昨日<img :src="dailyData.insuranceIssuersCountChange > 0 ? up : down" />{{
                  dailyData.insuranceIssuersCountChange
                  || 0 }}%
              </span>
            </div>
          </div>
          <div class="item">
            <div class="name">
              今日报价次数(次)
            </div>
            <div class="data">
              <span class="number">
                {{ dailyData.quoteCount }}
              </span>
              <span class="line">
                较昨日<img :src="dailyData.quoteCountChange > 0 ? up : down" />{{ dailyData.quoteCountChange || 0 }}%
              </span>
            </div>
          </div>
        </div>
      </PageMain>
      <PageMain class="ecology">
        <div class="title">常用功能</div>
        <div class="functionList">
          <div class="item flex a-c j-c f-c " v-for="(item, index) in functionsList" :key="item.id"
            @click="handleRouterChange(item, index)">
            <img class="icon" :src="item.ican" />
            <div class="name">{{ item.title }}</div>
          </div>
        </div>
      </PageMain>
      <div class="mapBox">
        <div class="map">
          <div class="title">业务员分布</div>
          <div class="chinaMap" ref="ChinaMap"></div>
        </div>
        <div class="level">
          <div class="title">{{ provinceName || '市级' }}</div>
          <div class="cityMap" ref="CityMap"></div>
        </div>
      </div>
      <PageMain class="ecology">
        <div class="title">出单趋势</div>
        <div class="orderTrend" ref="TrendRef"></div>
      </PageMain>
      <div class="otherBox">
        <div class="funnel">
          <div class="title">业务漏斗</div>
          <div class="chinaMap" ref="FunnelRef"></div>
        </div>
        <div class="pie">
          <div class="title">业务类型分布</div>
          <div class="cityMap" ref="PieRef"></div>
        </div>
      </div>
    </div>
    <PageMain class="right-section ">
      <div class="title">业务动态</div>
      <!-- 订单 -->
      <div class="quoteOrder mt-[24px]">
        <div class="item flex f-c mb-[16px]" v-for="item in newsList" :key="item.id">
          <div class="flex a-c j-s mb-[8px]">
            <span class="Order-title">报价订单</span>
            <span class="Order-time">{{ item.createTime }}</span>
          </div>
          <span class="Order-premium">{{ item.title }}</span>
        </div>
      </div>
      <!-- app二维码 -->
      <div class="qrcode flex a-c f-c">
        <img :src="downloadUrl" alt="">
        <span>扫码下载App</span>
      </div>
    </PageMain>
  </div>
</template>

<style lang="scss" scoped>
.container111 {
  display: flex;
  gap: 0;
}

.right-section {
  flex: 0 0 280px;
  /* 固定宽度，不缩放 */
  margin-left: 0;
  height: 1983px;

  .title {
    color: #333333;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    /* 添加相对定位 */
    padding-left: 12px;
    display: flex;
    align-items: center;

    /* 给左侧留出空间 */
    &::before {
      /* 用 ::before 代替 ::after */
      content: '';
      width: 4px;
      height: 18px;
      position: absolute;
      background-color: #0083FF;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 10px;
    }
  }

  .quoteOrder {
    height: calc(100% - 201px);
    overflow-y: auto;

    .item {
      .Order-title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }

      .Order-time {
        font-size: 12px;
        color: #999;
        font-weight: 400;
      }

      .Order-premium {
        font-weight: 400;
        font-size: 14px;
        color: #333;
      }
    }

    .qrcode {
      font-size: 14px;
      color: #333;
      font-weight: 400;
    }
  }

}

.w-full {
  flex: 1;

  .title {
    color: #333333;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    /* 添加相对定位 */
    padding-left: 12px;
    display: flex;
    align-items: center;

    /* 给左侧留出空间 */
    &::before {
      /* 用 ::before 代替 ::after */
      content: '';
      width: 4px;
      height: 18px;
      position: absolute;
      background-color: #0083FF;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 10px;
    }
  }

  .dataList {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    column-gap: 24px;

    .item {
      background: #F9FCFF;
      padding: 16px 24px;
      border-radius: 6px;

      .name {
        color: #333;
        font-weight: 400;
        font-size: 18px;
        margin-bottom: 12px;
      }

      .data {
        display: flex;
        justify-content: flex-start;

        .number {
          color: #333333;
          font-weight: 600;
          font-size: 24px;
        }

        .line {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-size: 14px;
          color: #666666;
          margin-left: 10px;

          img {
            width: 14px;
            height: 14px;
            margin: 0 2px;
          }
        }
      }
    }
  }

  .functionList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 0 8px;
    box-sizing: border-box;

    .item {
      .icon {
        display: block;
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
      }

      .name {
        color: #333333;
        font-size: 18px;
      }
    }
  }

  .mapBox,
  .otherBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px;
    gap: 24px;

    .map,
    .level {
      width: calc(50% - 5px);
      background: #ffffff;
      padding: 24px;
      border-radius: 6px;

      .chinaMap,
      .cityMap {
        width: 100%;
        height: 550px;
      }
    }

    .funnel,
    .pie {
      width: calc(50% - 5px);
      background: #ffffff;
      padding: 24px;
      border-radius: 6px;

      .chinaMap,
      .cityMap {
        width: 100%;
        height: 300px;
      }
    }
  }

  .orderTrend {
    width: 100%;
    height: 400px;
    margin-top: 24px;
  }
}
</style>