<template>
  <div id="data-statis">
    <div id="map-container"></div>
    <div class="left-area">
      <Section class="sections" title="今日扬尘噪音实时监测">
        <div class="statis">
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_pmerjd@2x.png" alt="" />
            </div>
            <div class="label">PM2.5</div>
            <div class="value" style="color: #5bdea5">
              {{ todayDataInfo.pm25 }}
            </div>
          </div>
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_sidu@2x.png" alt="" />
            </div>
            <div class="label">PM10</div>
            <div class="value" style="color: #5bdea5">
              {{ todayDataInfo.pm10 }}
            </div>
          </div>
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_wendu@2x.png" alt="" />
            </div>
            <div class="label">温度</div>
            <div class="value" style="color: #dd8d30">
              {{ todayDataInfo.temperature }}
            </div>
          </div>
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_shdu@2x.png" alt="" />
            </div>
            <div class="label">湿度</div>
            <div class="value" style="color: #41e2e0">
              {{ todayDataInfo.humidity }}%
            </div>
          </div>
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_zyung@2x.png" alt="" />
            </div>
            <div class="label">噪音</div>
            <div class="value" style="color: #cfaa5c">
              {{ projectDataInfo.noise }}
            </div>
          </div>
          <div class="stat-container">
            <div>
              <img src="@/assets/images/index/icon_fliaz@2x.png" alt="" />
            </div>
            <div class="label">负离子</div>
            <div class="value" style="color: #cfaa5c">
              {{ projectDataInfo.anion }}
            </div>
          </div>
        </div>
      </Section>
      <Section class="sections" title="本年地区与工程PM10对比分析">
        <div id="line-bar-chart" ref="pm10chart"></div>
      </Section>
      <Section class="sections long">
        <div class="switch-btns">
          <div
            :class="['bg-2-1', pm10rate == 'today' ? 'active' : '']"
            @click="switchPm10Rate('today')"
          >
            今日PM10排名
          </div>
          <div
            :class="['bg-2-1', pm10rate == 'lastWeek' ? 'active' : '']"
            @click="switchPm10Rate('lastWeek')"
          >
            上周PM10排名
          </div>
        </div>
        <STable
          style="height: calc(100% - 0.44rem)"
          :headers="header1"
          :table-data="pm10rankList"
          @row-click="openProjectWindow"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'pm10'">
              <span
                :class="['span-status']"
                :style="{ color: scope.row.qualified ? '#D19642' : '#5BDEA5' }"
                >{{ scope.row.pm10 }}</span
              >
            </template>
          </template>
        </STable>
      </Section>

      <ProjectDialog
        :visible="projectDialogVisible"
        :project-name="currentProjectName"
        :project-id="projectId"
        @change-visible="(val) => (projectDialogVisible = val)"
      ></ProjectDialog>
    </div>
    <div class="right-area">
      <Section class="sections long">
        <div class="switch-btns">
          <div
            :class="['bg-2-1', activeRight == 'dust' ? 'active' : '']"
            @click="switchRightList('dust')"
          >
            扬尘接入情况
          </div>
          <div
            :class="['bg-2-1', activeRight == 'video' ? 'active' : '']"
            @click="switchRightList('video')"
          >
            视频接入情况
          </div>
        </div>
        <STable
          style="height: calc(100% - 0.44rem)"
          :headers="activeRight == 'dust' ? header2 : header3"
          :table-data="activeRight == 'dust' ? dustData : videoData"
          @row-click="selectArea"
        >
          <template slot-scope="scope">
            <template v-if="scope.header.slot == 'pm10'">
              <span
                :class="['span-status']"
                :style="{
                  color:
                    scope.row.qualified == 0
                      ? '#5BDEA5'
                      : scope.row.qualified == 1
                      ? '#D19642'
                      : '#EF562D',
                }"
                >{{ scope.row.pm10 }}</span
              >
            </template>
          </template>
        </STable>
      </Section>
      <Section class="sections long">
        <div class="switch-btns">
          <div
            :class="['bg-2-1', dustType == 'offline' ? 'active' : '']"
            @click="switchDustList('offline')"
          >
            扬尘离线
          </div>
          <div
            :class="['bg-2-1', dustType == 'over' ? 'active' : '']"
            @click="switchDustList('over')"
          >
            扬尘超标
          </div>
        </div>
        <div class="list">
          <div
            class="list-item"
            v-for="item in dustList"
            :key="item.project_place1"
          >
            <div class="label">{{ item.project_region_name }}</div>
            <div class="progress">
              <el-progress
                :percentage="
                  Number(
                    dustType == 'offline' ? item.offline_rate : item.over_rate
                  )
                "
                :format="
                  () => {
                    return `${
                      dustType == 'offline'
                        ? item.offline_device_amount
                        : item.project_over_amount
                    }`;
                  }
                "
                :color="dustType == 'offline' ? '#db935e' : '#df5858'"
              ></el-progress>
            </div>
          </div>
        </div>
      </Section>
    </div>
    <div class="bottom-area">
      <div class="btm-status long">
        <div class="title">
          <img src="@/assets/images/index/icon-title.png" alt="" />
          建设工程
        </div>
        <div class="btm-l-v">
          <div class="status">
            在建 <span>{{ statistics.buildAmount }}</span>
          </div>
          <div class="status">
            已接入 <span>{{ statistics.acceptAmount }}</span>
          </div>
          <div class="status">
            未接入 <span>{{ statistics.unAcceptAmount }}</span>
          </div>
        </div>
      </div>
      <div class="btm-status">
        <div class="title">
          <img src="@/assets/images/index/icon-title.png" alt="" />
          视频监控
        </div>
        <div class="btm-l-v">
          <div>
            已接入
            <span
              >{{ statistics.monitorAcceptAmount }}/{{
                statistics.monitorAcceptRate
              }}%</span
            >
          </div>
        </div>
      </div>
      <div class="btm-status">
        <div class="title">
          <img src="@/assets/images/index/icon-title.png" alt="" />
          扬尘监测
        </div>
        <div class="btm-l-v">
          <div>
            已接入
            <span
              >{{ statistics.noiseAcceptAmount }}/{{
                statistics.noiseAcceptRate
              }}%</span
            >
          </div>
        </div>
      </div>
      <div class="btm-status">
        <div class="title">
          <img src="@/assets/images/index/icon-title.png" alt="" />
          检测预警
        </div>
        <div class="btm-l-v">
          <div>
            本月预警 <span>{{ statistics.warningAmount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="maptipinfo">
      <div>
        <span style="background-color: #00ce7c">优</span>
        PM10浓度值0~50ug/m <sup>3</sup>
      </div>
      <div>
        <span style="background-color: #fa9700">良</span>
        PM10浓度值51~150ug/m <sup>3</sup>
      </div>
      <div>
        <span style="background-color: #f56c6c">差</span>
        PM10浓度值&gt;150ug/m <sup>3</sup>
      </div>
    </div>

    <ProjectList
      :visible="projectListVisible"
      :area-name="currentAreaName"
      :area-id="currentAreaId"
      @change-visible="(val) => (projectListVisible = val)"
    ></ProjectList>
  </div>
</template>
<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
import { changxingJson } from "@/assets/data/changxing.js";
import changxingData from "@/assets/data/mapData.json";
import ProjectDialog from "@/views/DataStatis/project/Index.vue";
import ProjectList from "@/views/DataStatis/ProjectList.vue";
import {
  getInfo,
  getPM10Analysis,
  getMapData,
  getPm10RateRank,
  getVideoImportList,
  getStatistics,
  getDustList,
} from "@/api/index";
export default {
  name: "DataStatis",
  components: {
    ProjectDialog,
    ProjectList,
  },
  data() {
    return {
      header1: [
        {
          name: "所属区域",
          props: "project_region_name",
          width: "25%",
        },
        {
          name: "工程名称",
          props: "project_name",
          width: "60%",
          style: {
            textAlign: "left",
          },
        },
        {
          name: "PM10",
          props: "pm10",
          slot: "pm10",
          width: "15%",
        },
      ],
      data1: [
        {
          sq: "杭州",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 96,
        },
        {
          sq: "嘉兴",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 89,
        },
        {
          sq: "绍兴",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 84,
        },
        {
          sq: "绍兴",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 84,
        },
        {
          sq: "绍兴",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 84,
        },
        {
          sq: "绍兴",
          ycl: "0.00268%",
          zjcp: "0.00268%",
          stjc: "0.00268%",
          ff: 84,
        },
      ],
      header2: [
        {
          name: "区域",
          props: "project_region_name",
          width: "calc(100% / 5)",
        },
        {
          name: "在建项目",
          props: "build_project_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "已接项目",
          props: "accept_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "未接项目",
          props: "unaccept_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "接入率",
          props: "accept_rate",
          width: "calc(100% / 5)",
        },
        {
          name: "PM10",
          props: "pm10",
          slot: "pm10",
          width: "calc(100% / 5)",
        },
      ],
      header3: [
        {
          name: "区域",
          props: "project_region_name",
          width: "calc(100% / 5)",
        },
        {
          name: "在建项目",
          props: "build_project_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "已接项目",
          props: "accept_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "未接项目",
          props: "unaccept_amount",
          width: "calc(100% / 5)",
        },
        {
          name: "接入率",
          props: "accept_rate",
          width: "calc(100% / 5)",
        },
      ],

      activeTab: 1,
      percentage: 20,
      customColor: "#409eff",
      projectDialogVisible: false,
      todayDataInfo: {},
      projectDataInfo: {},
      pm10rate: "today",
      pm10rankList: [],
      dustData: [],
      videoData: [],
      activeRight: "dust",
      currentProjectName: "",
      projectId: "",
      statistics: {},
      projectListVisible: false,
      currentAreaName: "",
      currentAreaId: "",
      dustType: "offline",
      dustList: [],
    };
  },
  methods: {
    initMap() {},
    getData() {
      getStatistics().then((res) => {
        this.statistics = res.data;
      });
      getInfo().then((res) => {
        this.todayDataInfo = res.data.area_env;
        this.projectDataInfo = res.data.project_env;
      });
      getPM10Analysis().then((res) => {
        this.renderPM10Chart(res.data.pm10);
      });
      this.switchPm10Rate(this.pm10rate);
      this.switchDustList(this.dustType);
      getVideoImportList().then((res) => {
        this.videoData = res.data;
      });
      getMapData().then((res) => {
        var newChangxingData = [];
        this.dustData = res.data;
        res.data.map((item) => {
          newChangxingData.push({
            name: `${item.project_region_name}|${item.project_place1}`,
            value: [
              changxingData.filter((cx) => {
                return cx.name.split("|")[0] == item.project_region_name;
              })[0].value[0],
              changxingData.filter((cx) => {
                return cx.name.split("|")[0] == item.project_region_name;
              })[0].value[1],
              item.build_project_amount,
              "#00ce7c",
              item.qualified,
            ],
          });
        });
        this.initMapData("map-container", changxingJson, newChangxingData, 1);
      });
    },

    async load() {
      console.log("load");
    },

    initMapData(mapid, baseAreaJson, mapData, maplevel) {
      var myChart = echarts.init(document.getElementById(mapid));
      echarts.registerMap(mapid, baseAreaJson);
      var outdata = []; //地图区域挂载数据
      mapData.forEach(function (item, index) {
        outdata.push({
          name: item.name.split("|")[0],
          id: item.name.split("|")[1], // id
          value: item.value[2],
          index: index,
          //itemStyle: {
          //    areaColor: item.value[3]
          //}
        });
      });
      var _layoutSize = "100%";

      var option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            if (
              params.seriesType == "scatter" ||
              params.seriesType == "effectScatter"
            ) {
              return false;
            }
            return params.name + "<br>" + params.value;
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "0%",
          bottom: "0%",
          show: true,
          borderWidth: 0,
          backgroundColor: "transparent",
        },
        // 地图的阴影底图
        geo: {
          map: mapid,
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          aspectScale: 0.9,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: _layoutSize,
          itemStyle: {
            normal: {
              shadowColor: "#1ECCFD",
              shadowBlur: 9,
              borderColor: "#1ECCFD",
              borderWidth: 2,
              // color: '#082A52'
              color: "#082A52",
              areaColor: "#082A52",
              shadowOffsetY: 10,
              shadowBlur: 3,
            },
            emphasis: {
              areaColor: "#082A52",
            },
          },
          z: 1,
          animationDurationUpdate: 0,
          roam: false,
          regins: [],
          data: outdata,
        },
        series: [
          {
            type: "map",
            map: mapid,
            aspectScale: 0.9,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: _layoutSize,

            label: {
              normal: {
                show: false,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
                position: "bottom",
              },
              emphasis: {
                show: false,
                fontFamily: "SourceHanSansCN",
                fontSize: "14",
                color: "#FEFEFE",
              },
            },
            select: {
              label: {
                color: "#fff",
                show: false,
              },
              itemStyle: {
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0a56BC", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#12A6F2",
                    },
                  ],
                  global: true, // 缺省为 false
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#1ECCFD",
                borderWidth: 2,
                color: "#032359",
                areaColor: "#023E95",
              },
              emphasis: {
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 10,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                areaColor: {
                  type: "linear-gradient",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#15b5f5", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#106fd5",
                    },
                  ],
                },
              },
            },

            z: 1,
            data: outdata,
            roam: false,
          },

          {
            // undo
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: (value, params) => {
              if (value[4] == 0) {
                return (
                  "image://" + require("@/assets/images/common/icon_green.png")
                );
              } else if (value[4] == 1) {
                return (
                  "image://" + require("@/assets/images/common/icon_yellow.png")
                );
              } else {
                return (
                  "image://" + require("@/assets/images/common/icon_red.png")
                );
              }
            },

            colorBy: "data",
            symbolSize: function (val, params) {
              return params.value[2] ? 50 : 0;
            },
            label: {
              position: "inside",
              formatter: function (params) {
                return params.value[2] ? params.value[2] : "";
              },
              show: true,
              color: "#fff",
              fontSize: 14,
              offset: [0, -6],
            },
            z: 3,
            data: mapData,
            itemStyle: {
              color: function (params) {
                return params.data.value[3];
              },
            },
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.off().on("click", (params) => {
        if (maplevel == 1 && params.componentType === "series") {
          var streetName = null;
          var areaGUID = null;

          if (params.seriesType == "map") {
            // 地图
            streetName = params.data.name;
            areaGUID = params.data.id;
          } else {
            // 散点图
            streetName = params.name.split("|")[0];
            areaGUID = params.name.split("|")[1];
          }
          this.selectArea({
            project_place1: Number(params.data.name.split("|")[1]),
            project_region_name: params.data.name.split("|")[0],
          });
        }
      });

      this.$nextTick(() => {
        myChart.resize();
      });
      return myChart;
    },

    renderPM10Chart(data) {
      var myChart = echarts.init(this.$refs.pm10chart);
      var option = {
        grid: {
          top: "20%",
          left: "5%",
          right: "15%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["地区PM10", "平均工程PM10"],
          textStyle: {
            color: "#fff", // 图例文字颜色
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          data: data.map((item) => {
            return item.month;
          }),
          axisLine: {
            lineStyle: {
              color: "#fff", // x轴线颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff", // x轴线颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#AFCFED", // y轴线颜色
            },
          },
        },
        series: [
          {
            name: "地区PM10",
            type: "bar",
            data: data.map((item) => {
              return item.area_pm10;
            }),
            itemStyle: {
              color: "rgba(135, 206, 250, 0.6)", // 柱状图颜色，半透明蓝色
            },
          },
          {
            name: "平均工程PM10",
            type: "line",
            data: data.map((item) => {
              return item.project_pm10;
            }),
            smooth: true,
            lineStyle: {
              color: "#FF9900", // 折线颜色，橙色
            },
            itemStyle: {
              color: "#FF9900", // 折线点的颜色
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    switchPm10Rate(type) {
      this.pm10rate = type;

      getPm10RateRank(type).then((res) => {
        this.pm10rankList = res.data;
      });
    },
    switchDustList(type) {
      this.dustType = type;
      getDustList(type).then((res) => {
        this.dustList = res.data;
      });
    },
    openProjectWindow(row) {
      console.log(row);
      this.currentProjectName = row.project_name;
      this.projectId = row.project_id;
      this.projectDialogVisible = true;
    },
    switchRightList(type) {
      this.activeRight = type;
    },
    selectArea(row) {
      this.currentAreaId = row.project_place1;
      this.currentAreaName = row.project_region_name;
      this.projectListVisible = true;
    },
  },

  mounted() {
    if (this.userInfo.customer_id) {
      //
    }
    console.log(changxingJson);
    // this.initMapData("map-container", changxingJson, changxingData, 1);
    window.clickDetail = this.clickDetail;

    this.getData();
  },
  watch: {
    userInfo(val) {
      if (val.customer_id) {
        //
      }
    },
  },
  destroyed() {},
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>
<style lang="less" scoped>
#data-statis {
  position: relative;
  width: 100%;
  height: 100%;
}
#map-container {
  position: absolute;
  left: 0%;

  top: 0;
  width: 100%;
  height: calc(100% - 102px);
  background: transparent !important;
  z-index: 5;
}
.left-area {
  width: 400px;
  left: 10px;
  top: 80px;
  position: fixed;
  height: calc(100% - 90px);
  z-index: 999;
}
.right-area {
  position: fixed;
  right: 10px;
  top: 80px;
  width: 400px;
  height: calc(100% - 90px);
  z-index: 999;
}
.bottom-area {
  position: fixed;
  width: calc(100% - 830px);
  left: 410px;
  bottom: 10px;
  right: 420px;
  z-index: 999;
}
.sections {
  height: calc(25% - 8px) !important;
  margin-bottom: 12px;
  &:last-child {
    margin-bottom: 0;
  }
}
.sections.long {
  height: calc(50% - 8px) !important;
}
.bottom-section {
  width: 100%;
  height: 100% !important;
}
::v-deep .span-status {
  &.green {
    color: #47ae5f;
  }
  &.orange {
    color: #df7a1f;
  }
  &.red {
    color: #df441f;
  }
  &.blue {
    color: #b83be7;
  }
}

.switch-btns {
  margin-bottom: 10px;
  line-height: 34px;
  display: flex;
  justify-content: space-between;
  .bg-2-1 {
    background: url("@/assets/images/common/btn-2-1-deactive.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 18px;
    width: calc(100% / 2 - 9px);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.active {
      background: url("@/assets/images/common/btn-2-1-active.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
  }
  .bg-3-1 {
    background: url("@/assets/images/common/btn-3-1-deactive.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 12px;
    width: calc(100% / 3 - 8px);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.active {
      background: url("@/assets/images/common/btn-3-1-active.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #fff;
    }
  }
}
.list {
  height: calc(100% - 44px);
  overflow-y: auto;
  .list-item {
    background: url("@/assets/images/common/list-item.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 2px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    .label {
      width: 80px;
      padding-left: 6px;
      font-size: 14px;
      color: #fff;
    }
    .progress {
      width: calc(100% - 80px);
    }
  }
}
#line-bar-chart {
  width: 100%;
  height: 100%;
}
.statis {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 10px);
  margin-top: 10px;
}
.stat-container {
  background: url("@/assets/images/index/icon_j_yi@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: calc(50% - 10px);
  margin-right: 20px;
  margin-bottom: 10px;
  color: rgba(175, 207, 237, 1);
  font-size: 16px;
  padding: 0 10px;
  height: calc(100% / 3 - calc(20px / 3));
  display: flex;
  align-items: center;
  justify-content: space-between;
  &:nth-child(2n) {
    margin-right: 0;
  }
  &:nth-child(5) {
    margin-bottom: 0;
  }
  &:nth-child(6) {
    margin-bottom: 0;
  }
  img {
    width: 22px;
    vertical-align: top;
    margin-right: 12px;
  }
  .label {
    width: 40%;
    vertical-align: top;
  }

  .value {
    width: calc(60% - 34px);
    vertical-align: top;
    text-align: right;
  }
}
::v-deep .el-progress {
  font-size: 0;
  line-height: inherit !important;
}
::v-deep .el-progress__text {
  font-size: 14px !important;
  color: #db935e !important;
}
::v-deep .el-progress-bar__outer {
  height: 6px !important;
}
.bottom-area {
  display: flex;
  justify-content: space-between;
  .btm-status {
    background: url("@/assets/images/index/btm-short.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 92px;
    width: 20%;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
    &.long {
      background: url("@/assets/images/index/btm-long.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 92px;
      width: 40%;
    }
    .title {
      font-size: 18px;
      color: #afcfed;
      line-height: 42px;
      img {
        width: 26px;
        margin: 8px;
        vertical-align: top;
        margin-right: 0;
      }
    }
    .btm-l-v {
      line-height: 50px;
      color: #fff;
      display: flex;
      justify-content: flex-start;
      font-size: 14px;
      .status {
        width: calc(100% / 3);
        text-align: center;
        border-right: 1px solid #224695;
        margin: 10px 0;
        line-height: 30px;

        &:last-child {
          border: none;
        }
      }
      div:not(.status) {
        line-height: 50px;
        padding: 0 20px;
        vertical-align: top;
        span {
          line-height: 50px;
          margin-left: 20px;
        }
      }
      span {
        font-size: 22px;
        line-height: 30px;
        vertical-align: top;
      }
    }
  }
}

::v-deep .el-progress-bar__outer {
  background: rgba(55, 99, 151, 1) !important;
}
.maptipinfo {
  width: 220px;
  height: 110px;
  position: fixed;
  bottom: 100px;
  right: 430px;
  color: #fff;
  font-size: 12px;
  div {
    margin: 8px 0;
    span {
      display: inline-block;
      padding: 0 8px;
      background-color: #0088f5;
      border-radius: 4px;
    }
  }
}
</style>