<template>
  <div class="main_root">
    <div class="row_item">
      <div class="cell_item left_w max_h">
        <div class="regin_info">
          <div class="regin_info_item">
            <div class="regin_info_num">
              {{ regionOverviewInfo.devicenum || 0 }}<span>台</span>
            </div>
            <div class="regin_info_title">设备数</div>
          </div>
          <div class="regin_info_item">
            <div class="regin_info_num">
              {{ regionOverviewInfo.usernum || 0 }}<span>人</span>
            </div>
            <div class="regin_info_title">用户数</div>
          </div>
          <div class="regin_info_item">
            <div class="regin_info_num">
              {{ regionOverviewInfo.regionnum || 0 }}<span>个</span>
            </div>
            <div class="regin_info_title">区域数</div>
          </div>
          <div class="regin_info_item">
            <div class="regin_info_num">
              {{ regionOverviewInfo.schoolnum || 0 }}<span>所</span>
            </div>
            <div class="regin_info_title">学校数</div>
          </div>
        </div>
        <div id="mapAreaEcharts"></div>
      </div>
      <div class="cell_item right_w max_h">
        <div class="cell_header">
          <div>区域概况</div>
        </div>
        <div class="content_main">
          <div class="table_wrap">
            <Table
              :max-height="534"
              :columns="regionColumns"
              :data="regionOverviewInfo.regionList"
            ></Table>
          </div>
        </div>
      </div>
    </div>
    <div class="row_item">
      <div class="cell_item left_w device_info">
        <div class="device_info_left">
          <div class="cell_header">
            <div>设备类型</div>
          </div>
          <div class="content_main" id="deviceModelEcharts"></div>
        </div>
        <div class="device_info_right">
          <div class="cell_header">
            <div>客户端版本</div>
          </div>
          <div class="content_main">
            <div id="controlVersionEcharts"></div>
            <div id="appVersionEcharts"></div>
          </div>
        </div>
      </div>
      <div class="cell_item right_w">
        <div class="cell_header">
          <div>应用下载</div>
        </div>
        <div class="content_main" id="appDownloadEcharts"></div>
      </div>
    </div>
    <div class="row_item">
      <div class="cell_item">
        <div class="cell_header">
          <div>设备活跃度</div>
          <Select
            v-model="deviceActivityInfo.doEvent"
            :transfer="true"
            @on-change="getDeviceActivityList()"
            style="width: 100px; font-size: 14px; font-weight: 400"
          >
            <Option :value="1">最近一月</Option>
            <Option :value="2">最近一周</Option>
          </Select>
        </div>
        <div class="content_main" id="deviceActivityEcharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ra_list_rv,
  ra_list_dm,
  ra_list_cc,
  ra_list_sc,
  ra_list_ad,
  ra_list_da
} from "@/api/ra";
import * as echarts from "echarts";
import coordChinaMap from "@/assets/echartsMap/coordChinaMap.json";
export default {
  data() {
    return {
      // 概况信息
      regionOverviewInfo: {
        usernum: 0,
        devicenum: 0,
        regionnum: 0,
        schoolnum: 0,
        regionList: [],
        provinceList: []
      },
      regionColumns: [
        {
          type: "index",
          title: "序号",
          width: 70,
          align: "center"
        },
        {
          title: "区域名称",
          key: "regionName",
          align: "center"
        },
        {
          title: "学校数",
          key: "schoolnum",
          align: "center"
        },
        {
          title: "设备数",
          key: "devicenum",
          align: "center"
        },
        {
          title: "用户数",
          key: "usernum",
          align: "center"
        }
      ],
      // 设备类型信息
      deviceModelList: [],
      // 客户端版本-管控应用
      controlVersionList: [],
      // 客户端版本-应用商店
      appVersionList: [],
      // 应用下载
      appDownloadList: [],
      // 设备活跃度
      deviceActivityInfo: {
        // 1最近一月2最近一周
        doEvent: 2,
        list: []
      }
    };
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  created() {
    this.getRegionOverview();
    this.getDeviceModelList();
    this.getControlVersionList();
    this.getAppVersionList();
    this.getAppDownloadList();
    this.getDeviceActivityList();
  },
  methods: {
    // 概况信息
    getRegionOverview() {
      ra_list_rv({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.regionOverviewInfo = data.obj;
          this.initMapEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initMapEcharts() {
      let _registerMap = echarts.getMap("china");
      if (!_registerMap) {
        echarts.registerMap("china", {
          geoJSON: require("@/assets/echartsMap/china.json")
        });
      }
      let allData = [];
      this.regionOverviewInfo.provinceList.forEach((item) => {
        allData.push({
          label: {
            show: true,
            color: "#fff"
          },
          name: item.areaName.replace(/省|市/g, ""),
          value: item.devicenum,
          numInfo: {
            schoolnum: item.schoolnum,
            usernum: item.usernum,
            devicenum: item.devicenum
          }
        });
      });
      let geoCoordMap = coordChinaMap;
      let convertData = (outdata) => {
        let res = [];
        for (let i = 0; i < outdata.length; i++) {
          let geoCoord = geoCoordMap[outdata[i].name];
          if (geoCoord) {
            res.push({
              name: outdata[i].name,
              value: geoCoord.concat(outdata[i].value),
              numInfo: outdata[i].numInfo,
              //单独修改圆环上的文字
              label: {
                formatter: () => {
                  return (
                    outdata[i] &&
                    outdata[i].numInfo &&
                    outdata[i].numInfo.devicenum
                  );
                }
              },
              itemStyle: {
                color: "#FF243A"
              }
            });
          }
        }
        return res;
      };
      let options = {
        tooltip: {
          show: true,
          borderColor: "#6AC8F0",
          // 将tooltip限制在图表内
          confine: true,
          // 将tooltip添加到body下
          appendTo: "body",
          formatter: (params) => {
            return `${params.name}<div>设备数：${
              (params.data &&
                params.data.numInfo &&
                params.data.numInfo.devicenum) ||
              0
            } 台</div>
            <div>用户数：${
              (params.data &&
                params.data.numInfo &&
                params.data.numInfo.usernum) ||
              0
            } 人</div>
            <div>学校数：${
              (params.data &&
                params.data.numInfo &&
                params.data.numInfo.schoolnum) ||
              0
            } 所</div>`;
          }
        },
        visualMap: {
          show: false,
          seriesIndex: [0],
          inRange: {
            color: ["#A5DCF4", "#006edd"]
          }
        },
        geo: {
          map: "china",
          zoom: 1.2,
          show: true,
          roam: false,
          emphasis: {
            label: {
              show: false
            },
            areaColor: "#01215c"
          },
          layoutSize: "100%",
          itemStyle: {
            borderColor: "#0085F7",
            borderWidth: 1
          }
        },
        series: [
          {
            type: "map",
            map: "china",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              show: false,
              color: "#fff"
            },
            itemStyle: {
              areaColor: "#0085F7",
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                show: true,
                color: "#fff"
              },
              itemStyle: { areaColor: "#6AC8F0" }
            },
            select: {
              label: {
                show: true,
                color: "#fff"
              },
              itemStyle: { areaColor: "#A5CC82" }
            },
            data: allData
          },
          {
            type: "scatter",
            tooltip: {
              show: true,
              borderColor: "#6AC8F0",
              // 将tooltip限制在图表内
              confine: true,
              // 将tooltip添加到body下
              appendTo: "body",
              formatter: (params) => {
                return `${params.name}<div>设备数：${
                  (params.data &&
                    params.data.numInfo &&
                    params.data.numInfo.devicenum) ||
                  0
                } 台</div>
            <div>用户数：${
              (params.data &&
                params.data.numInfo &&
                params.data.numInfo.usernum) ||
              0
            } 人</div>
            <div>学校数：${
              (params.data &&
                params.data.numInfo &&
                params.data.numInfo.schoolnum) ||
              0
            } 所</div>`;
              }
            },
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4
            },
            label: {
              show: true,
              color: "#fff"
            },
            symbol: "pin", //定位图标样式
            symbolSize: 60,
            //点的名称和经纬度
            data: convertData(allData)
          }
        ]
      };
      const eInstance = echarts.init(document.getElementById("mapAreaEcharts"));
      eInstance.clear();
      eInstance.setOption(options);
    },
    // 设备类型信息
    getDeviceModelList() {
      ra_list_dm({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.deviceModelList = data.obj;
          this.initDeviceModelEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initDeviceModelEcharts() {
      let legendNameList = [];
      let seriesDataList = [];
      this.deviceModelList.forEach((item) => {
        legendNameList.push(item.deviceModel);
        seriesDataList.push({
          value: item.devicenum,
          name: item.deviceModel
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: legendNameList,
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#52C41A", "#FF811A"],
        series: [
          {
            type: "pie",
            name: "设备类型",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("deviceModelEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
    },
    // 客户端版本-管控应用
    getControlVersionList() {
      ra_list_cc({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.controlVersionList = data.obj;
          this.initControlVersionEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initControlVersionEcharts() {
      let seriesDataList = [];
      this.controlVersionList.forEach((item) => {
        seriesDataList.push({
          value: item.num,
          name: item.cversion
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["管控应用"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#6B30FF", "#FF87C1"],
        series: [
          {
            type: "pie",
            name: "管控应用",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("controlVersionEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
    },
    // 客户端版本-应用商店
    getAppVersionList() {
      ra_list_sc({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.appVersionList = data.obj;
          this.initAppEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initAppEcharts() {
      let seriesDataList = [];
      this.appVersionList.forEach((item) => {
        seriesDataList.push({
          value: item.num,
          name: item.cversion
        });
      });
      const options = {
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["应用商店"],
          textStyle: {
            color: "#253A70"
          }
        },
        color: ["#ED4A99", "#FF87C1"],
        series: [
          {
            type: "pie",
            name: "应用商店",
            radius: ["25%", "35%"],
            center: ["50%", "45%"],
            label: {
              formatter: (params) => {
                return `${params.name}\n${params.value}`;
              },
              borderWidth: 1,
              borderRadius: 4,
              color: "#7C8DB5",
              fontSize: 12,
              lineHeight: 18
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("appVersionEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
    },
    // 应用下载
    getAppDownloadList() {
      ra_list_ad({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid
      }).then((data) => {
        if (data.code === 0) {
          this.appDownloadList = data.obj;
          this.initAppDownloadEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initAppDownloadEcharts() {
      let xAxisDataList = [];
      let seriesDataList = [];
      this.appDownloadList.forEach((item) => {
        xAxisDataList.push(item.appName);
        seriesDataList.push(item.num || 0);
      });
      let options = {
        color: ["#339DFF"],
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.name}：${params.value}次`;
          }
        },
        legend: {
          bottom: "10",
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          //图例距离饼图的距离
          itemGap: 10,
          orient: "horizontal",
          data: ["应用名称"],
          textStyle: {
            color: "#253A70"
          }
        },
        grid: {
          top: 50,
          left: 50,
          right: 20,
          bottom: 50,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#333"
              },
              // 数据多自动隐藏
              // interval: 0,
              rotate: 0
            },
            data: xAxisDataList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: "次",
            minInterval: 1,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true //隐藏或显示
            },
            type: "value"
          }
        ],
        series: [
          {
            name: "应用名称",
            type: "bar",
            barWidth: 32,
            barGap: 0,
            label: {
              normal: {
                show: true,
                align: "center",
                verticalAlign: "bottom",
                position: "top",
                distance: 0,
                formatter: `{c}`
              }
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("appDownloadEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
    },
    // 设备活跃度
    getDeviceActivityList() {
      ra_list_da({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        doEvent: this.deviceActivityInfo.doEvent
      }).then((data) => {
        if (data.code === 0) {
          this.deviceActivityInfo.list = data.obj;
          this.initDeviceActivityEcharts();
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    initDeviceActivityEcharts() {
      let xAxisDataList = [];
      let seriesDataList = [];
      this.deviceActivityInfo.list.forEach((item) => {
        xAxisDataList.push(item.date);
        seriesDataList.push(item.num || 0);
      });
      let options = {
        color:
          this.deviceActivityInfo.doEvent === 2 ? ["#52C41A"] : ["#339DFF"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff", //背景颜色（此时为默认色）
          borderWidth: 1, //边框线宽
          textStyle: {
            lineHeight: 1.6,
            color: "#253A70"
          },
          axisPointer: {
            z: 1, //竖线在圆圈后面
            lineStyle: {
              color: "#f8f8fd",
              width: 20,
              opacity: 0.7
            }
          },
          formatter: (data) => {
            let date = "";
            let seriesDom = "";
            for (const item of data) {
              date = item.name;
              seriesDom += `<div><span style="color: #95ABDF">${item.seriesName}</span> ${item.value}次</div>`;
            }
            return `${date}${seriesDom}`;
          }
        },
        legend: {
          show: false
        },
        grid: {
          top: 20,
          left: 50,
          right: 20,
          bottom: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              textStyle: {
                color: "#333"
              },
              // 数据多自动隐藏
              // interval: 0,
              rotate: 0
            },
            data: xAxisDataList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true //隐藏或显示
            },
            type: "value"
          }
        ],
        series: [
          {
            name: "设备活跃度",
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  this.deviceActivityInfo.doEvent === 2
                    ? [
                        { offset: 0, color: "rgba(82, 196, 26, 0.4)" },
                        { offset: 0.5, color: "rgba(82, 196, 26, 0.2)" },
                        { offset: 0.9, color: "rgba(82, 196, 26, 0)" }
                      ]
                    : [
                        { offset: 0, color: "rgba(51, 157, 255, 0.4)" },
                        { offset: 0.5, color: "rgba(51, 157, 255, 0.2)" },
                        { offset: 0.9, color: "rgba(51, 157, 255, 0)" }
                      ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            label: {
              normal: {
                show: true,
                align: "center",
                verticalAlign: "bottom",
                position: "top",
                distance: 0,
                color: "inherit",
                formatter: `{c}`
              }
            },
            data: seriesDataList
          }
        ]
      };
      const eInstance = echarts.init(
        document.getElementById("deviceActivityEcharts")
      );
      eInstance.clear();
      eInstance.setOption(options);
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  border-radius: 0;
  border: none;
  background-color: transparent;
  .row_item {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-of-type {
      margin-bottom: 0;
    }
    .cell_item {
      width: 100%;
      height: 400px;
      border-radius: 15px;
      border: 1px solid #e9f0f9;
      background-color: #fff;
      &.left_w {
        width: calc(58.333% - 10px);
      }
      &.right_w {
        width: 41.667%;
      }
      &.max_h {
        height: 600px;
      }
      &.device_info {
        display: flex;
        justify-content: space-between;
        .device_info_left {
          width: 33.33%;
          height: 100%;
        }
        .device_info_right {
          width: 66.66%;
          height: 100%;
        }
      }
      .cell_header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px;
        font-size: 16px;
        line-height: 1;
        font-weight: bold;
      }
      .content_main {
        width: 100%;
        height: calc(100% - 64px);
        #controlVersionEcharts,
        #appVersionEcharts {
          display: inline-block;
          width: 50%;
          height: 100%;
        }
      }
    }
  }
}
.regin_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 16px;
  .regin_info_item {
    margin-left: 20px;
    margin-right: 30px;
    text-align: center;
    .regin_info_num {
      font-size: 24px;
      font-weight: bold;
      > span {
        margin-left: 4px;
        font-size: 12px;
      }
    }
    .regin_info_title {
      margin-top: 6px;
      font-size: 14px;
      color: #798cb5;
    }
  }
}
#mapAreaEcharts {
  width: 100%;
  height: calc(100% - 76px);
}
</style>
