平台-首页

src/views/platformSection/home/index.vue

@@ -1,25 +1,786 @@
 <template>
   <div class="main_root">
     <div class="row_item">
-      <div class="cell_item left_w max_h"></div>
-      <div class="cell_item right_w max_h"></div>
+      <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"></div>
-      <div class="cell_item right_w"></div>
+      <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>
+      <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 {};
+    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: {}
+  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.devicenum,
+            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),
+              //单独修改圆环上的文字
+              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.numInfo && params.numInfo.devicenum) || 0
+            } 台</div>
+            <div>用户数：${
+              (params.numInfo && params.numInfo.usernum) || 0
+            } 人</div>
+            <div>学校数：${
+              (params.numInfo && params.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",
+            coordinateSystem: "geo",
+            zlevel: 2,
+            rippleEffect: {
+              period: 4,
+              brushType: "stroke",
+              scale: 4
+            },
+            label: {
+              show: true,
+              color: "#fff"
+            },
+            // #FF243A
+            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: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}次`;
+          }
+        },
+        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,
+                formatter: `{c}`
+              }
+            },
+            data: seriesDataList
+          }
+        ]
+      };
+      const eInstance = echarts.init(
+        document.getElementById("deviceActivityEcharts")
+      );
+      eInstance.clear();
+      eInstance.setOption(options);
+    }
+  }
 };
 </script>
 
@@ -51,7 +812,67 @@ export default {
       &.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% - 48px);
+        #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>

src/views/schoolSection/deviceManage/deviceManage.vue

@@ -860,7 +860,26 @@ export default {
       const options = {
         tooltip: {
           trigger: "item",
-          formatter: "{b}: {d}%"
+          formatter: (params) => {
+            let memoryInfo = {
+              value: params.value,
+              unit: "B"
+            };
+            if (memoryInfo.value / 1024 < 1024) {
+              memoryInfo.value =
+                Math.floor((memoryInfo.value / 1024) * 100) / 100;
+              memoryInfo.unit = "KB";
+            } else if (memoryInfo.value / 1024 / 1024 < 1024) {
+              memoryInfo.value =
+                Math.floor((memoryInfo.value / 1024 / 1024) * 100) / 100;
+              memoryInfo.unit = "MB";
+            } else {
+              memoryInfo.value =
+                Math.floor((memoryInfo.value / 1024 / 1024 / 1024) * 100) / 100;
+              memoryInfo.unit = "GB";
+            }
+            return `${params.name}：${memoryInfo.value}${memoryInfo.unit}`;
+          }
         },
         legend: {
           bottom: "10",