<template>
  <div class="map-layout">
    <div class="map-header">
      <div class="map-header-center">
        <div class="map-header-center-title">融通地产危险源辨识系统</div>
        <div class="map-header-center-tip">
          Rongtong Real Estate Hazard Identification System
        </div>
      </div>
    </div>
    <div class="map-content">
      <div class="map-content-left">
        <div class="map-content-left-wrap">
          <map-item-container title="评估数据统计">
            <div
              v-for="item in 3"
              :key="item"
              style="width: 30%; display: inline-block"
              class="content-assess-item"
            >
              <div class="content-assess-title">评估项目</div>
              <div :id="'leftTop' + item" style="height: 100%"></div>
            </div>
          </map-item-container>
          <map-item-container title="项目风险排名">
            <mapTable />
          </map-item-container>
          <map-item-container title="项目风险排名">
            <div ref="bar" style="width: 100%; height: 100%"></div>
          </map-item-container>
        </div>
      </div>
      <div ref="myEchart" class="echart-instance"></div>
      <div class="map-content-right">
        <div class="map-content-right-wrap">
          <map-item-container title="风险级别统计">
            <echartMap />
          </map-item-container>
          <map-item-container title="事故类型统计">
            <div style="columns: 4">
              <div
                v-for="item in 10"
                :key="item"
                :style="randomCircle()"
                class="map-circle-item"
              >
                <div>物体打击</div>
                <div>1455</div>
              </div>
            </div>
          </map-item-container>
          <map-item-container title="项目风险排名">
            <div ref="bar1" style="width: 100%; height: 100%"></div>
          </map-item-container>
        </div>
      </div>
    </div>

    <div class="map-footer"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import echartMap from "./pie.vue";
import echartMap2 from "./pie2.vue";
import { mapTable, mapItemContainer } from "@/views/map/index.js";
export default {
  name: "echarts",
  components: {
    echartMap,
    echartMap2,
    mapTable,
    mapItemContainer,
  },
  data() {
    return {
      name: 100000,
      myMap: null,
      mapData: [],
      myTopLeft: [],
    };
  },
  mounted() {
    this.myMap = echarts.init(this.$refs.myEchart);
    this.initMap();
    this.initListeners();
    this.initEcharts();
  },
  methods: {
    randomCircle() {
      const w = parseInt(Math.random() * 40 + 50);
      let r = Math.floor(Math.random() * 256); //0-255.999999
      let g = Math.floor(Math.random() * 256);
      let b = Math.floor(Math.random() * 256);
      return {
        width: w + "px",
        height: w + "px",
        backgroundColor: `rgba(${r},${g},${b},0.4)`,
        color: `rgb(${r},${g},${b})`,
      };
    },
    initMap(code = 100000) {
      if (code != this.name) {
        this.myMap.clear();
      }
      this.name = code == 100000 ? "china" : code + "";
      axios
        .get(
          `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
        )
        .then((geoJson) => {
          if (!geoJson.data) {
            return;
          }
          echarts.registerMap(this.name, { geoJSON: geoJson.data });
          this.mapData = geoJson.data.features;
          this.myMap.setOption(
            {
              series: [
                {
                  type: "map3D",
                  boxWidth: 85,
                  map: this.name,
                  regionHeight: 4,
                  itemStyle: {},
                  viewControl: {
                    alpha: 60,
                  },
                  label: {
                    show: true,
                    formatter: (params) => {
                      return params.name + " ";
                    },
                    textStyle: {
                      color: "#2cb0e2",
                      fontSize: 10,
                    },
                  },
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: "#2cb0e2",
                    color: "rgba(0, 0, 0, 0.3)",
                    // opacity: 0.6,
                    shadowColor: "rgba(0, 0, 0, 1)",
                    shadowBlur: 1,
                  },
                },
              ],
            },
            {
              notMerge: true,
            }
          );
        });
    },
    initListeners() {
      const _this = this;
      this.myMap.on("click", "series.map3D", function (params) {
        const selectData = _this.mapData.find(
          (x) => x.properties.name == params.name
        );
        if (selectData) {
          _this.initMap(selectData.properties.adcode);
        }
      });
    },
    initEcharts() {
      // 评估数据统计
      for (let i = 1; i <= 3; i++) {
        const echart = echarts.init(document.getElementById("leftTop" + i));
        echart.setOption({
          series: [
            {
              name: "Pressure",
              type: "gauge",
              detail: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              pointer: {
                icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
                width: 1,
                length: "100%",
                offsetCenter: [0, "8%"],
                itemStyle: {
                  color: "rgba(255, 252, 57,0.6)",
                },
              },
              anchor: {
                show: true,
                showAbove: true,
                size: 8,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "rgba(255, 252, 57,0.6)",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  opacity: 0.1,
                },
              },
              progress: {
                show: true,
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(164, 190, 203,0.6)", // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: "rgba(1,179,227,0.6)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(67,243,203,0.6)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              data: [
                {
                  value: i * 30,
                },
              ],
            },
          ],
        });
        this.myTopLeft.push(echart);
      }
      // 风险类型统计
      const bar = echarts.init(this.$refs.bar);
      const bar1 = echarts.init(this.$refs.bar1);
      var hours = [
        "12a",
        "1a",
        "2a",
        "3a",
        "4a",
        "5a",
        "6a",
        "7a",
        "8a",
        "9a",
        "10a",
        "11a",
        "12p",
        "1p",
        "2p",
        "3p",
        "4p",
        "5p",
        "6p",
        "7p",
        "8p",
        "9p",
        "10p",
        "11p",
      ];
      const data = [
        [1, 0, 5],
        [1, 17, 4],
        [1, 16, 7],
        [1, 1, 3],
        [1, 13, 4],
        [1, 8, 11],
        [1, 20, 3],
        [0, 16, 14],
        [0, 10, 2],
        [0, 6, 0],
        [0, 3, 12],
        [0, 20, 16],
      ];
      const option = {
        visualMap: {
          show: false,
          max: 20,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
        },
        xAxis3D: {
          type: "category",
          data: hours,
        },
        yAxis3D: {
          type: "value",
        },
        zAxis3D: {
          type: "value",
        },
        grid3D: {
          boxWidth: 150,
          boxHeight: 80,
          boxDepth: 90,
          viewControl: {
            alpha: 15,
            beta: 0,
          },
          axisLine: {
            lineStyle: { color: "rgba(255,255,255,0.3)" },
          },
          light: {
            main: {
              shadow: true,
              quality: "ultra",
              intensity: 1.5,
            },
          },
        },
        series: [
          {
            type: "bar3D",
            data: data.map(function (item) {
              return {
                value: [item[1], item[0], item[2]],
              };
            }),
            shading: "color",
            label: {
              show: false,
              fontSize: 16,
              borderWidth: 1,
            },
            itemStyle: {
              opacity: 0.8,
            },
            emphasis: {
              label: {
                fontSize: 20,
                color: "#900",
              },
              itemStyle: {
                color: "#900",
              },
            },
          },
        ],
      };
      bar.setOption(option);
      bar1.setOption(option);
    },
    resetEcharts() {},
    map2d() {
      this.myMap.setOption({
        geo: {
          map: "china",
          label: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 10,
            },
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: "#2cb0e2",
            color: "#1f7fad",
            color: "rgba(0, 0, 0, 0.3)",
            opacity: 0.6,
            shadowColor: "rgba(0, 0, 0, 1)",
            shadowBlur: 1,
          },
          emphasis: {
            label: {
              show: true,
              distance: 10,
              formatter: "{a}",
              color: "#fff",
              fontSize: 10,
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#5ad8ff",
              color: "rgb(51 203 254)",
              opacity: 0.8,
            },
          },
          postEffect: {
            enable: true,
            bloom: {
              enable: false,
            },
          },
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-layout {
  width: 100%;
  height: 100%;
  background: #000;
  background: url("../assets/map/bg.png") no-repeat;
  background-size: 100% 100%;

  .map-header {
    height: 83px;
    z-index: 10;
    color: #fff;
    padding: 5px 16px;
    background: url("../assets/map/top.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: border-box;
    &-center {
      text-align: center;
      &-title {
        text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
        font-weight: 700;
        font-size: 24px;
      }
      &-tip {
        font-family: "微软雅黑", sans-serif;
        font-size: 16px;
        color: rgba(215, 215, 215, 0.4);
      }
    }
  }
  .map-footer {
    background: url("../assets/map/bottom.png") no-repeat;
    background-size: 100% 100%;
    height: 44px;
  }
  .map-content {
    width: 100%;
    height: calc(100% - 128px);
    &-left,
    &-right {
      width: 25%;
      height: 100%;
      float: left;
      position: relative;
    }
    &-left::after,
    &-right::after {
      content: "";
      width: 44px;
      height: 84%;
      background: url("../assets/map/hud-left.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 10;
      transform: translateY(-52%);
    }
    &-right::after {
      background-image: url("../assets/map/hud-right.png");
      position: absolute;
      right: 0;
      left: auto;
    }
    &-left-wrap {
      margin-left: 20px;
      height: 100%;
    }
    &-right-wrap {
      margin-right: 40px;
      height: 100%;
    }
  }

  .echart-instance {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    float: left;
  }
  .map-circle-item {
    border-radius: 50%;
    animation: circleAnimation 0.5s infinite;
    margin: 10px;
    break-inside: avoid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .map-circle-item:nth-of-type(2n) {
    animation: circleAnimation 0.4s infinite;
  }
  .map-circle-item:nth-of-type(2n + 1) {
    animation: circleAnimation 0.3s infinite;
  }
  .map-circle-item:last-child {
    animation: circleAnimation 0.6s infinite;
  }
}

@keyframes circleAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  display: none;
}

// 评估数据
.content-assess-item {
  display: inline-block;
  width: 40%;
  .content-assess-title {
    height: 60px;
    width: 100%;
    background: url("../assets/map/content-assess-title.png") center center;
    background-size: 100% 100%;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-weight: bold;
  }
}
</style>
